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 用户按压按钮，按钮背景的透明度变为0。安卓和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 是数据源，renderItem是渲染的一条组件,只渲染屏幕上面显示的元素
<FlatList
data={[{key: 'Jimmy'}, {key: 'Julie'}, ]}
renderItem={({item}) =>
<Text style={styles.item}>{item.key}</Text>}
/>
组件---SectionList形成一块数据块，有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
