React Native之Flexbox布局和監測文本輸入onChangeText

1   Flexbox布局

1) flexDirection

  可以決定布局的主軸,子元素是應該沿着水準軸(row)方向排列，還是沿着豎直軸(column)方向排列

2) justifyContent

  決定其子元素沿着次軸（與主軸垂直的軸，比如若主軸方向為row，則次軸方向為column）的排列方式

  有flex-start、center、flex-end、space-around、space-between以及space-evenly

3) alignItems

  子元素沿着次軸（與主軸垂直的軸，比如若主軸方向為row，則次軸方向為column）的排列方式。子元素是應該靠近次軸的起始端還是末尾段分布,可選項有：flex-start、center、flex-end以及stretch,這裡strech是延伸的意思

2 簡單代碼測試

render() {
    return (
      <View style={{flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch',}}>
 
       <View style={{height: 50, backgroundColor: 'powderblue'}} />
        <View style={{height: 50, backgroundColor: 'skyblue'}} />
        <View style={{height: 100, backgroundColor: 'steelblue'}} />
      </View>
    );
  }      

效果如下

render() {
    let pic = {uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'};        
    return (
      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-end'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }      

render() {
    return (
      <View style={{padding: 10}}>
        <TextInput style={{height: 40}} placeholder="hello" onChangeText={(text) => this.setState({textValue:text})} />
        <Text style={styles.instructions}>{this.state.textValue}</Text>
      </View>
    );
  }