RN目前主要支持flexbox的如下6个属性

2017-09-08 本文已影响20人基本密码宋

如下：

1、alignItems 伸缩项目在交叉轴上的对齐方式

      flex-start (默认值）交叉轴上以开始位置对齐
      flex-end  交叉轴上已结束位置对齐
      center    交叉轴上以中间对齐
      stretch   已拉伸的效果展示

2、alignSelf 用来设置单独的伸缩项目在交叉轴上的对齐方式。会覆盖默认的对齐方式。

      auto 
      flex-start
      flex-end
      center
      stretch   （如果交叉轴为垂直方向的话，只有在不设置高度的话，才能看到效果 ）（伸缩项目在交叉轴方向占满容器）

3、flex 是flex-grow 、 flex-shrink 、flex-basis 这三个属性的缩写。其语法：

      flex:none | flex-grow  flex-shrink  flex-basis   ,其中第二个和第三个参数为可选参数 ，默认值为 ： 0,1 auto

4、flex-direction 主轴线的方向

       row 从左到右的方向
       row-reverse 相反的方向（从右刀左）
       column 从上到下的方向（默认  手机嘛）
       column-reverse 从下到方向

5、flex-wrap

        wrap 自动换行
        norap 不管怎样不换行
        wrap-reverse 自动换行 以反方向换

6、justify-content (在主轴线上的对齐方式)

          flex-start  左对齐（起始位置）
          flex-end 右对齐
          center 中间对齐
          space-between 平均分布在界面上
          space-around 中间的间距=两边的边距相加

下面就是实战了哦

flexDirection

flexDirection 在rn中默认是从上到下排列的。

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={{backgroundColor:'red',margin:20}}>
            <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
                <Text style={{fontSize:16}}>1</Text>
            </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>2</Text>
          </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>3</Text>
          </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>4</Text>
          </View>
      </View>
    );
  }
}

里面没有定义任何属性默认是从上到下 flexDirection:'column' 效果图为：

QQ截图20170918224445.png

当flexDirection:'column-reverse' 从下到上

QQ截图20170918225541.png

当flexDirection:'row' 从左到右的排列

QQ截图20170918224903.png

当flexDirection:'row-reverse' 从右到左的排列

QQ截图20170918225043.png

下面放下一个整体的代码

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={{backgroundColor:'red',margin:20,flexDirection:'column-reverse'}}>
            <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
                <Text style={{fontSize:16}}>1</Text>
            </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>2</Text>
          </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>3</Text>
          </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>4</Text>
          </View>
      </View>
    );
  }
}