React-Native之Flex布局

• 在React-Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。一般来说，使用flexDirection、alignItems、justifyContent三个样式属性就已经能够满足大多数布局需求。
• React-Native中的Flexbox的工作原理和web上的CSS基本一致，但是也有一些差异： flexDirection的默认值是column，而不是row；flex也只能指定一个数字值。

1. Flex Direction

• 在这里需要引入一个主轴的概念，我们可以理解为子组件排列的方向。

  row                // 主轴为水平方向,从左向右
  row-reverse        // 主轴为水平方向，从右向左
  column             // 主轴为竖直方向，从上到下，默认值
  column-reverse     // 主轴为竖直方向，从下到上
  

  export default class Layout_Flex extends Component {
    render() {
      return (
        <View style={{flex: 1, backgroundColor: 'white'}}>
          // flexDirection: 'row',  水平排列
          <View style={{flex:1, flexDirection: 'row', backgroundColor: '#d400ff', paddingTop: 20}}>
            <View style={{width: 100, height: 100, backgroundColor: 'powderblue'}}> </View>
            <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}}> </View>
            <View style={{width: 100, height: 100, backgroundColor: 'steelblue'}}> </View>
          </View>
  
          // flexDirection: 'column',  竖直排列
          <View style={{flex:1, flexDirection: 'column', backgroundColor: '#ffc700', paddingTop: 20}}>
            <View style={{width: 100, height: 100, backgroundColor: 'powderblue'}}> </View>
            <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}}> </View> <View style={{width: 100, height: 100, backgroundColor: 'steelblue'}}> </View>
          </View>
        </View>
      );
    }
  }
  

flexDirection.png

2. Justify Content

• 决定子组件沿着主轴的排列方式，有以下可选项：

  flex-start      //沿主轴方向，从始端向末端排列
  center：        //沿主轴方向，从中心位置向两头排列
  flex-end：      //沿主轴方向，从末端向始端排列
  space-around:   //沿主轴方向，等间距排列，首末子组件与父组件相距1/2个间距
  space-between:  //沿主轴方向，等间距排列，首末子组件与父组件相距0
  

  export default class Layout_Flex extends Component {
   render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white', marginTop: 20}}>
        <View style={{flexDirection: 'column', justifyContent: 'flex-start', backgroundColor: '#ffc700', height: 100}}>
          <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
        <View style={{flexDirection: 'column', justifyContent: 'center', backgroundColor : '#ff7a00', height: 100}}>
          <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
        <View style={{flexDirection: 'column', justifyContent: 'flex-end', backgroundColor : '#c4ff00', height: 100}}>
          <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
        <View style={{flexDirection: 'column', justifyContent: 'space-around', backgroundColor : '#00ffd9', height: 100}}>
          <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
        <View style={{flexDirection: 'column', justifyContent: 'space-between', backgroundColor : '#008cff', height: 100}}>
          <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
      </View>
    );
   }
  }
  

• 主轴方向为竖直方向

justifyContent_column.png

• 主轴方向为水平方向

justifyContent_row.png

Align Items

• 决定子组件沿着次轴(与主轴垂直的轴)的排列方式。

  flex-start    // 沿次轴方向，从始端向末端排列
  center        // 沿次轴方向，重中心位置向两头排列
  flex-end      // 沿伺候方向，从末端向始端排列
  stretch       // 沿次轴反向，拉伸到与父组件相同高度或宽度
  

• 设置stretch时，子组件在次轴方向上不能有固定尺寸。即主轴为竖直方向时，不能设置子组件的width；主轴为水平方向时，不能设置子组件的height。否则不会生效

  export default class Layout_Flex extends Component {
   render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white', marginTop: 20}}>
        <View style={{flexDirection: 'column', alignItems: 'flex-start', backgroundColor: '#ffc700', height: 100}}>
          <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
        <View style={{flexDirection: 'column', alignItems: 'center', backgroundColor : '#ff7a00', height: 100}}>
          <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
        <View style={{flexDirection: 'column', alignItems: 'flex-end', backgroundColor : '#c4ff00', height: 100}}>
          <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
        <View style={{flexDirection: 'column', alignItems: 'stretch', backgroundColor : '#00ffd9', height: 100}}>
          <View style={{height: 20, backgroundColor: 'powderblue'}}></View>
          <View style={{height: 20, backgroundColor: 'skyblue'}}></View>
          <View style={{height: 20, backgroundColor: 'steelblue'}}></View>
        </View>
      </View>
    );
   }
  }
  

• 主轴为竖直方向

alignItems_column.png

• 主轴为水平方向

alignItems_row.png

4.Flex Wrap

• 决定子组件在父组件内是否允许多行排列

  nowrap     // 子组件只允许排列在一行上，可能会溢出
  wrap        // 子组件在一行排列溢出时，就多行排列
  

  export default class Layout_Flex extends Component {
   render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white', marginTop: 20}}>
        <View style={{flexDirection: 'row', flexWrap: 'nowrap', backgroundColor: '#ffc700', height: 200}}>
          <View style={{width: 100, height: 50, backgroundColor: 'powderblue', margin: 30}}></View>
          <View style={{width: 100, height: 50, backgroundColor: 'skyblue', margin: 30}}></View>
          <View style={{width: 100, height: 50, backgroundColor: 'steelblue', margin: 30}}></View>
        </View>
        <View style={{flexDirection: 'row', flexWrap: 'wrap', backgroundColor : '#ff7a00', height: 200}}>
          <View style={{width: 100, height: 50, backgroundColor: 'powderblue', margin: 30}}></View>
          <View style={{width: 100, height: 50, backgroundColor: 'skyblue', margin: 30}}></View>
          <View style={{width: 100, height: 50, backgroundColor: 'steelblue', margin: 30}}></View>
        </View>
      </View>
    );
   }
  }
  

flexWrap.png