React-Native之Flex布局

2017-11-01 本文已影响0人 Coder_Answer

在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

React-Native之Flex布局

1. Flex Direction

2. Justify Content

Align Items

4.Flex Wrap

猜你喜欢

热点阅读