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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容