1.Layout with Flexbox
flexDirection ('row'勿决,'column')//取得值為primary axis低缩,另一個為secondary axis
justifyContent ('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
//primary axis上的分布
alignItems ('flex-start', 'flex-end', 'center', 'stretch')
//secondary axis上的分布
2.Handling Text Input
基礎組件---TextInput
有兩個prop:
onChangeText prop : takes a function to be called every time the text changed
onSubmitEditing prop: takes a function to be called when the text is submitted
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={(text) => this.setState({text})}
/>
3.Handling Touches
基礎組件---Button
<Button
onPress={()=>{Alert.alert('You tapped the button!')}}
title="Press Me"
/>
Touchable 組件
TouchableHighlight 用戶按壓按鈕讳推,按鈕背景變暗。安卓和ios都可以用究驴。
TouchableNativeFeedback 用戶按壓按鈕,按鈕震動跑慕。安卓用。
TouchableOpacity 用戶按壓按鈕,按鈕背景的透明度變?yōu)?惩系。安卓和ios都可以用堡牡。
TouchableWithoutFeedback.用戶按壓按鈕,無反饋芥颈,安卓和ios都可以用涂臣。
<TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>Touchable with Long Press</Text>
</View>
</TouchableHighlight>
4.Using a ScrollView
基礎組件---
ScrollView :垂直滾動條
<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Image source={require('./img/favicon.png')} />
</ScrollView>
5.Using List Views
組件---FlatList
有data和renderItem屬性署辉,data 是數(shù)據(jù)源,renderItem是渲染的一條組件,只渲染屏幕上面顯示的元素
<FlatList
data={[{key: 'Jimmy'}, {key: 'Julie'}, ]}
renderItem={({item}) =>
<Text style={styles.item}>{item.key}</Text>}
/>
組件---SectionList形成一塊數(shù)據(jù)塊,有SectionHeader的情況
<SectionList
sections={[
{title: 'D', data: ['Devin']},
{title: 'J', data: ['Jackson', 'James', 'Jillian',]},
]}
renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
/>
6.Networking
Fetch
aysnc
XMLHttpRequest
websocket