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,alignItems: 'flex-end'}}>
        <View style={{width: 50,height: 50,backgroundColor: 'powderblue'}} />
        <View style={{width: 50,backgroundColor: 'skyblue'}} />
        <View style={{width: 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>
    );
  }

效果如下