《React Native移动开发实战》一一2.4 React Native的Flexbox布局
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 // 页面根View
05 // 子组件view1
06 // 子组件view2
07
08 );
09 }
10 }
11
12 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 // 这里省略了没有修改的代码
02
03 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 // 这里省略了没有修改的代码
02
03 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 // 这里省略了没有修改的代码
02
03 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 // 这里省略了没有修改的代码
02
03 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 // 这里省略了没有修改的代码
02
03 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 // 这里省略了没有修改的代码
02
03 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 // 这里省略了没有修改的代码
02
03 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 // 这里省略了没有修改的代码
02
03 const styles = StyleSheet.create({
04 container: {
05 flex: 1
06 },
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移动开发实战》一一2.4 React Native的Flexbox布局 的全部内容， 来源链接： utcz.com/z/382988.html
