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 (
        
          // flexDirection: 'row',  水平排列
          
             
             
             
          
  
          // flexDirection: 'column',  竖直排列
          
             
               
          
        
      );
    }
  }
  

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 (
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
    );
   }
  }
  

• 主轴方向为竖直方向

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 (
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      
    );
   }
  }
  

• 主轴为竖直方向

alignItems_column.png

• 主轴为水平方向

alignItems_row.png

4.Flex Wrap

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

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

  export default class Layout_Flex extends Component {
   render() {
    return (
      
        
          
          
          
        
        
          
          
          
        
      
    );
   }
  }
  

flexWrap.png