React Native之Flexbox布局和監(jiān)測文本輸入onChangeText


1   Flexbox布局

1) flexDirection
   可以決定布局的主軸,子元素是應(yīng)該沿著水平軸(row)方向排列，還是沿著豎直軸(column)方向排列
2) justifyContent
   決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向?yàn)閞ow，則次軸方向?yàn)閏olumn）的排列方式
   有flex-start、center、flex-end、space-around、space-between以及space-evenly
3) alignItems
   子元素沿著次軸（與主軸垂直的軸，比如若主軸方向?yàn)閞ow，則次軸方向?yàn)閏olumn）的排列方式。子元素是應(yīng)該靠近次軸的起始端還是末尾段分布,可選項(xiàng)有：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>
        );
      }

效果如下

 


 










作者：chen.yu
深信服三年半工作經(jīng)驗(yàn)，目前就職游戲廠商，希望能和大家交流和學(xué)習(xí),
微信公眾號：編程入門到禿頭 或掃描下面二維碼
零基礎(chǔ)入門進(jìn)階人工智能(鏈接)