react native 学习笔记2

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"
/>

<TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
  <View style={styles.button}>
    <Text style={styles.buttonText}>Touchable with Long Press</Text>
  </View>
</TouchableHighlight>

<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>}
/>

Fetch
aysnc
XMLHttpRequest
websocket