2.4 React Native的Flexbox布局无论是在移动平台还是Web前端开发中，布局技术都是必不可少的。了解Web开发的读者想必都听说过著名的CSS“盒子模型”，如图2.4所示。
图2.4 CSS“盒子模型”CSS“盒子模型”依赖于position属性、浮动属性以及display属性来进行布局，所以，对于一些特殊但常用的布局（例如垂直居中）实现就比较困难。于是，在2009年，W3C提出了一种新的方案——Flexbox布局。Flexbox（Flexible Box的缩写，又称弹性盒子布局）布局旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。Flexbox布局的主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。?小知识：W3C（World Wide Web Consortium）指万维网联盟，该组织建立于1994年，其宗旨是通过促进通用协议的发展并确保其通用型，以激发Web世界的全部潜能。目前，主流浏览器都已经很好地支持Flexbox布局，如图2.5所示。
图2.5 Flexbox布局与主流浏览器的兼容性React Native实现了Flexbox布局的大部分功能，并且在实际应用开发中也使用Flexbox来实现布局。这不仅使React Native的UI开发变得更加简单，还很好地解决了iOS、Android等屏幕适配的问题。?提示：React Native中Flexbox布局的工作原理和Web开发基本一致，只有少许差异。例如，默认值不同，React Native中flexDirection属性的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，另外，flex只能指定一个数字值。为了方便读者理解后面的代码，这里先简单介绍React Native开发中Flexbox布局的使用。Flexbox布局所使用的属性，简单来说，可以分为以下两个。? 决定子组件排列规则的属性，例如，flexDirection、flexWrap、justifyContent以及alignItems等。? 决定组件自身显示规则的属性，例如，alignSelf以及flex等。下面分别简单介绍这些属性。2.4.1 flexDirection设置组件的排列flexDirection属性表明组件中子组件的排列方向，取值有column（默认值）、row以及row-reverse。例如，在不设置flexDirection的情况下，下面代码中的子组件view1和view2是按照默认值column纵向排列的，代码如下：
01 export default class flexbox extends Component {02 render() {03 return (04 // 页面根View05 // 子组件view106 // 子组件view207 08 );09 }10 }1112 const styles = StyleSheet.create({13 container: {14 flex: 1.backgroundColor:'gray',15 },16 view1: { //子组件view1的样式17 height: 150,18 width: 150,19 backgroundColor: 'red'20 },21 view2: { //子组件view2的样式22 height: 150,23 width: 150,24 backgroundColor: 'green'25 }26 });?提示：为了节约篇幅，上述例子中只附上了关键代码，例如导入模块或组件的代码，形如import from 。但是读者在实际开发过程中，千万不要忘记先导入相关模块或组件，否则会发生错误。效果如图2.6所示。
图2.6 flexDirection属性为column时的效果当将flexDirection属性设置为row时，代码如下：
01 // 这里省略了没有修改的代码0203 const styles = StyleSheet.create({04 container: {05 flex: 1, backgroundColor.'gray',06 flexDirection: 'row'07 },08 view1: { //子组件view1的样式09 height: 150,10 width: 150,11 backgroundColor: 'red'12 },13 view2: { //子组件view2的样式14 height: 150,15 width: 150,16 backgroundColor: 'green'17 }18 });
那么，子组件view1和view2将按照row进行横向排列，效果如图2.7所示。
图2.7 flexDirection属性为row时的效果2.4.2 flexWrap设置是否换行flexWrap属性表明子组件“溢出”父组件时是否进行换行，取值有nowrap（默认值）、wrap以及wrap-reverse。这里，所谓的溢出是指子组件显示的区域超出了父组件的空间。为了模拟溢出的效果，下面修改view1和view2的大小，代码如下：
01 // 这里省略了没有修改的代码0203 const styles = StyleSheet.create({04 container: {05 flex: 1, backgroundColor:'gray',06 flexDirection: 'row'07 },08 view1: { 09 height: 200,10 width: 200, // 增大了view1的宽度11 backgroundColor: 'red'12 },13 view2: { 14 height: 200,15 width: 200, // 增大了view2的宽度16 backgroundColor: 'green'17 }18 });
由于没有设置flexWrap，所以当view2显示不全时，会按照默认值nowrap不进行换行，效果如图2.8所示。
图2.8 flexWrap属性为nowrap时的效果当将flexWrap属性设置为wrap时，代码如下：
01 // 这里省略了没有修改的代码0203 const styles = StyleSheet.create({04 container: {05 flex: 1, backgroundColor:'gray',06 flexDirection: 'row',07 flexWrap: 'wrap'08 },09 view1: { 10 height: 200,11 width: 200,12 backgroundColor: 'red'13 },14 view2: { 15 height: 200,16 width: 200, 17 backgroundColor: 'green'18 }19 });
此时，由于view2和view1的总宽度（200 + 200 = 400）大于屏幕的宽度（使用的iPhone 7宽度=375），所以view2将会换行显示，效果如图2.9所示。
图2.9 flexWrap属性为wrap时的效果2.4.3 justifyContent设置横向排列位置justifyContent属性表明组件中子组件横向排列在其父容器的哪个位置，取值有flex-start、flex-end、center、space-between以及space-around。例如，想要实现子组件水平居中的效果，就可以将justifyContent的值设置为center，代码如下：
01 // 这里省略了没有修改的代码0203 const styles = StyleSheet.create({04 container: {05 flex: 1, backgroundColor.'gray',06 flexDirection: 'row',07 justifyContent: 'center'08 },09 view1: { 10 height: 150,11 width: 150,12 backgroundColor: 'red'13 },14 view2: { 15 height: 150,16 width: 150,17 backgroundColor: 'green'18 }19 });
效果如图2.10所示。
图2.10 justifyContent属性为center时的效果2.4.4 alignItems设置纵向排列位置alignItems属性表明组件中子组件纵向排列在其父容器的哪个位置，取值有flex-start、flex-end、center、baseline以及stretch。alignItems属性和justifyContent的作用相似，只是justifyContent决定了子组件横向排列的位置，而alignItems决定了子组件纵向排列的位置。如果想要实现子组件垂直居中的效果，那么就可以将alignItems的值设置为center，代码如下：
01 // 这里省略了没有修改的代码0203 const styles = StyleSheet.create({04 container: {05 flex: 1, backgroundColor:'gray',06 flexDirection: 'row',07 alignItems: 'center'08 },09 view1: { 10 height: 150,11 width: 150,12 backgroundColor: 'red'13 },14 view2: { 15 height: 150,16 width: 150,17 backgroundColor: 'green'18 }19 });
效果如图2.11所示。
图2.11 alignItems属性为center时的效果在了解了justifyContent和alignItems属性的用法之后，想必读者很容易就能够自己实现水平垂直居中的效果了，代码如下：
01 // 这里省略了没有修改的代码0203 const styles = StyleSheet.create({04 container: {05 flex: 1, backgroundColor:'gray',06 flexDirection: 'row',07 justifyContent: 'center',08 alignItems: 'center'09 },10 view1: { 12 height: 150,12 width: 150,13 backgroundColor: 'red'14 },15 view2: { 16 height: 150,17 width: 150,18 backgroundColor: 'green'19 }20 });
水平垂直居中的效果如图2.12所示。
图2.12 使用justifyContent和alignItems属性实现水平垂直居中效果2.4.5 alignSelf设置特定组件的排列alignSelf属性表明某个特定组件的排列情况，取值有auto、flex-start、flex-end、center以及stretch。这里以center为例，代码如下：
01 // 这里省略了没有修改的代码0203 const styles = StyleSheet.create({04 container: {05 flex: 1, backgroundColor:'gray',06 },07 view1: { 08 height: 150,09 width: 150,10 backgroundColor: 'red'11 },12 view2: { 13 height: 150,14 width: 150,15 backgroundColor: 'green',16 alignSelf: 'center'17 }18 });
效果如图2.13所示。
图2.13 alignSelf属性为center时的效果2.4.6 flex设置组件所占空间flex属性可以让组件动态计算和配置自己所占用的空间大小，取值是数值。如果想要view1和view2填满父组件，并且view1和view2的大小相同，使用flex就很容易实现，代码如下：
01 // 这里省略了没有修改的代码0203 const styles = StyleSheet.create({04 container: {05 flex: 106 },07 view1: { 08 flex: 1,09 backgroundColor: 'red'10 },11 view2: { 12 flex: 1,13 backgroundColor: 'green'14 }15 });
效果如图2.14所示。flex属性使用如此简单，但表现力却非常强大，它是Flexbox布局实现自适应设备和屏幕尺寸的核心，读者需要在后面的React Native开发中逐步熟练掌握flex属性的使用。
图2.14 使用flex属性实现自适应屏幕的尺寸大小
相关资源：东方耀手把手教React Native实战开发