React Native Flexbox布局简单介绍

Flexbox

React Native中的Flexbox和CSS3中新加的Flexbox基本上是差不多的,CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为。对很多应用程序来说，当不使用浮动，且弹性容器的外边距也不需要与其内容的外边距合并时，弹性盒子模型比起方框模型要好一些。
许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语音顺序以及基于源代码顺序的导航均不受影响。
但是呢，相对于CSS中的Flexbox它的属性名称不太一样，而且属性值也少，默认值也许也不一样。

样式属性

Flex Direction

在组件style中指定flexDirection可以决定布局的主轴。就是指子元素排列方向，水平方向(row)排列,竖直方向(column)排列。默认值:column
我们以初始化的模板为例，在View中再添加3个View，并设置flexDirection值为:row

export default class HHHHeats extends Component {
  render() {
    return (
      <View style={styles.container}>
      
      <View style = {styles.views}>
      </View>
      <View style = {styles.views}>
      </View>
      <View style = {styles.views}>
      </View
      
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',//主轴排列方式
    alignItems: 'stretch',//次轴排列方式
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  views: {
    backgroundColor: 'green',
    width: 100,
    height: 100,
    marginLeft: 10,
    marginTop: 10,
  }
});

效果:

Paste_Image.png

Justify Content

上面的flexDirection决定了方向，这个justifyContent就是决定排列的方式。就是指子元素应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start
、center、flex-end、space-around以及space-between。
将上面的justifyContent设置为:flex-start，效果如下图,可以看到子元素沿着主轴方向从起始位置开始排列（原为:center）。

container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向 
  }

Paste_Image.png

Align Items

flexDirection决定了主轴方向,justifyContent决定了子元素沿主轴方向的排列方式,而alignItems就是沿次轴方向(与主轴垂直的方向,它有4种可能的字符串值：flex-start、flex-end、center、stretch。比如主轴是row，那么次轴就是column)的排列方式。
比如将上方代码修改，alignItems属性值改为flex-end:

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向
  }

Paste_Image.png
其中有个属性值stretch表示拉长,或者拉宽。若要使其生效就不能给子元素设定高度或者宽度（取决于flexDirection，因为alignItems是次轴方向的排列方式），想想也是，若要有固定的宽度或者高度还怎么拉伸呢？
修改上方代码:

views: {
    backgroundColor: 'green',
    width: 100,
    //height: 100, 注释掉
    marginLeft: 10,
    marginTop: 10,
  }

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向
  }

效果如下:

Paste_Image.png

alignSelf

alignSelf的属性值:auto、flex-start、flex-end、center、stretch。它的作用是用于忽略父视图中的alignItems设置的值。比如上方代码修改:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主轴方向
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  views: {
    backgroundColor: 'green',
    width: 100,
    height: 100,
    marginLeft: 10,
    marginTop: 10,
    alignSelf: 'flex-end'
  }
});

alignItems已经设置了flex-start，在子元素中alignSelf设置flex-end最终显示的为flex-end:

Paste_Image.png
当值为auto则默认显示父视图中的alignItems值。