React Native开发之FlexBox代码＋图解

来自Leo的原创博客，转载请著名出处

我的stackoverflow

---

前言

FlexBox布局是React Native的布局核心，鉴于自己对FlexBox还有很多概念不太清楚，这篇文章就当成是总结，并且分享出来给大家。

FlexBox布局能够帮助你更好的帮助你控制控件的大小和位置，Flexbox非常适合Mobile端的适配，我想这也是FaceBook为什么选择FlexBox作为React Native布局的原因吧。

本文参考文章如下

• A Complete Guide to Flexbox
• react-native 之布局篇

当然，React Native官网也有FlexBox相关的文档，不过讲解的内容不多。

！！！！React Native的迭代更新很快，所以如果有读者发现了本文代码不适配新版本了，欢迎评论，我会及时修改。

---

Getting Start

react-native init  LearnFlexBox

运行

cd LearnFlexBox/
react-native run-ios

会看到默认的截图

由于模拟器截图实在太宽，所以本文把Demo范围限定在一个小的范围内
重写Render方法

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.exampleContainer}>

        </View>
      </View>
    );
  }

这里的exampleContainer风格如下

  exampleContainer:{
    width:320,
    height:200,
    backgroundColor:'gray'
  }

---

Container和Item

• Container就是容器，有些属性是设置到Container上的例如alignItems。设置到Container上的属性决定了如何布局内部的Item
• Item， 在容器中的子视图。设置到Item上的属性，决定了自己在Container中的位置大小

有过iOS或者安卓原生开发的同学应该能有个更清楚的认识，很像View和Subview的关系

---

flexDirection

这个Container属性决定了按照哪个方向来布局Item，默认从上到下
添加一个style

  exampleItem:{
    width:30,
    height:30,
    backgroundColor:'#27E6E2'
  }

然后，在添加三个子视图

<View style={styles.exampleContainer}>
  <View style={styles.exampleItem}></View>
  <View style={styles.exampleItem}></View>
  <View style={styles.exampleItem}></View>
</View>

然后，修改exampleContainer,添加一个属性flexDirection

  exampleContainer:{
    width:320,
    height:200,
    backgroundColor:'gray',
    flexDirection:'column'
  },

当flexDirection设置为column的时候效果

当flexDirection设置为row的时候

注意：React Native的Flexbox目前不支持row-reverse和column-reverse

---

alignItems－垂直轴上的位置关系

有四个值

'flex-start', 'flex-end', 'center', 'stretch'

示例代码如下

<View style={
   {
   width:320,height:200,backgroundColor:'gray',alignItems:'stretch',flexDirection:'row'}}>
  <View style={
   {
   width:50,backgroundColor:'green'}}></