ReactNative布局基础

ReactNative布局基础

1、FlexBox

FlexBox是一个布局的逻辑模型。一个组件可以通过flexbox逻辑来布局子view。
FlexBox通过flexDirection,alignItems,justfyContent组合来实现不同的布局。

2、FlexBox的使用

一个view通过flex指定伸缩的比例，flexDirection指定布局的方向。通过二者共同作用则可以实现各种不同的布局方式。
其中view在父类中所占大小比例为其flex值占比所有子view的flex值之和。

2.1、使用示例

2.1.1、flexDirection属性

flexDirection属性可选值有row，column，row-reverse，column-reverse四种。其中row是从左到右依次排列，column是从上到下依次排列。
而row-reverse和column-reverse顾名思义就是分别按row和column模式的相反方向来排列。
利用如下代码测试各属性值，

<View style={{flex: 1, flexDirection:'row'}}>    <View style={{width: 50, height: 50, backgroundColor: 'powderblue', justifyContent: 'center', alignItems: 'center'}}>        <Text>1</Text>    </View>    <View style={{width: 50, height: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>        <Text>2</Text>    </View>    <View style={{width: 50, height: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >        <Text>3</Text>    </View></View>

修改其中的flexDirection属性值，得到如下结果。从图中可以看出各个属性值的作用。

2.1.2、flex属性

flex属性指定了该view在父类中所占大小，是一个相对的概念。若view不指定flex大小，则默认占满父类空间。在开发中如果遇到某个控件没有展示，那么有可能是在布局方向上
某个view没有设置flex，所以占满了父类空间，从而将其他view挤出屏幕。
利用如下代码测试flex的属性值

<View style={{flex: 1, flexDirection:'row'}}>    <View style={{flex: 1, width: 50, height: 50, backgroundColor: 'powderblue', justifyContent: 'center', alignItems: 'center'}}>        <Text>1</Text>    </View>    <View style={{flex: 2, width: 50, height: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>        <Text>2</Text>    </View>    <View style={{flex: 3, width: 50, height: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >        <Text>3</Text>    </View></View>

得到如下结果。从图中可以看出flex表示的view所占父类空间大小的占比。（设置了flex后，则在主轴方向上设置view的长度是无效的）

3、FlexBox的对齐方式

3.1、justfyContent属性

justfyContent属性是设置给父view，用来决定子view在主轴方向上对齐方式的。（即flexDirection方向为row，则justfyContent指定的是row方向的对齐方式，
若flexDirection方式为column，则justfyContent指定的是column方向的对齐方式）。
justfyContent的可选值为：

• flex-start
• flex-end
• center
• flex-end
• space-between
• space-around

其中flex-start,center,flex-end分别为靠左，居中，靠右对齐。space-between则是将剩余空间均匀的分布在子view之间，而space-around则是将剩余空间均匀分布在每个字view的两边。
space-between与space-around的实际效果如下图：

3.2、alignItems属性（注意与alignSelf的区别）

alignItem的属性作用与justfyContent类似，其控制子view在非主轴（与主轴垂直方向）方向上的对齐方式。其中，主轴的方向是flexDirction所指定的方向。
alignItem的可选值为：

• flex-start
• flex-end
• center
• stretch

其中flex-start,center,flex-end分别为靠顶，居中，靠底对齐。stretch是拉伸模式，即在非主轴方向上将剩余空间占满。（如果在非主轴方向上设置了长度，则拉伸模式是无效的）。
测试stretch模式

<View style={{flex: 1, flexDirection: "row", alignItems: 'stretch', justifyContent: 'center'}}>    <View style={{flex: 1, width: 50, backgroundColor: 'powderblue', justifyContent: 'center', alignItems: 'center'}}>        <Text>1</Text>    </View>    <View style={{flex: 2, width: 50, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center'}}>        <Text>2</Text>    </View>    <View style={{flex: 3, width: 50, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}} >        <Text>3</Text>    </View></View>

运行结果如图

4、布局中的单位问题

由于编写样式代码时，组件的宽高是没有单位的。那么在样式代码中指定的宽高单位肯定与实际尺寸有某种对应关系。
通过如下代码

<Text>    window.width={Dimensions.get("window").width + "\n"}    window.height={Dimensions.get("window").height + "\n"}    pxielRatio={PixelRatio.get()}</Text>

显示屏幕的宽高及屏幕密度，结果如下：

而实际的屏幕宽高为:

由此分析可知样式文件中的宽高单位均是dp，即实际的宽高为样式设置的值乘以屏幕密度。

5、总结

1. 通过flex及flexDirection来设置布局大小比例及方向，justfyContent与alignItems设置子view的对齐方式，从而构建各种布局。
2. 在样式文件中宽高单位均为dp。

6、参考

1. http://www.infoq.com/cn/articles/react-native-layout
2. https://facebook.github.io/react-native/docs/flexbox.html
3. https://segmentfault.com/a/1190000002658374
4. https://facebook.github.io/react-native/docs/pixelratio.html
5. https://github.com/facebook/react-native/issues/4934