5分钟吃透React Native Flexbox
5分钟吃透React Native Flexbox
今天我们来聊聊Flexbox，它是前端的一个布局方式。在React Native中是主流布局方式。如果你刚刚入门React Native，或者没有多少前端的技术经验，亦或者对其半知半解，那么这篇文章将很好的帮助你参透Flexbox的整个全貌。
purpose
通过这篇文章你将快速吃透整个Flexbox，因为对于Flexbox你只需掌握以下几点属性即可。
- flex
- flexDirection
- justifyContent
- alignItems
- flexWrap
- alignSelf
flex
Flexbox使用的是弹性布局，它有个属性flex用来控制它的弹性。有点类似与Android布局中的weight属性。当然与前端的css中的flex也有所不同，它支持的类型是number不是string。它有三种状态：正数、零与负数。直接看代码：
1import React, {Component} from 'react';
2import {StyleSheet, Text, View} from 'react-native';
3
4export default class App extends Component<Props> {
5 render() {
6 return (
7 <View style={styles.container}>
8 <View style={styles.red}/>
9 <View style={styles.blue}/>
10 <View style={styles.orange}/>
11 </View>
12 );
13 }
14}
15
16const styles = StyleSheet.create({
17 container: {
18 flex: 1,
19 justifyContent: 'center',
20 alignItems: 'center',
21 backgroundColor: '#F5FCFF',
22 },
23 red: {
24 flex: 1,
25 width: 100,
26 backgroundColor: 'red'
27 },
28 blue: {
29 flex: 2,
30 width: 100,
31 backgroundColor: 'blue'
32 },
33 orange: {
34 width: 100,
35 height: 100,
36 backgroundColor: 'orange'
37 }
38});父容器使用flex:1来撑满整个屏幕，orange是固定的一个view，而red与blue使用flex，通过flex的值进行等比(1:2)分摊剩余的空间。来看下运行效果。
这是为正数的情况，如果flex:0，控件的大小就会根据设置的width与height来固定显示。
如果flex:-1，如果空间足够，控件的大小也会根据width与height来展示；如果空间不足，会根据minWidth与minHeight来展示。
一般都不会使用flex:-1，而且经过测试，空间不足时minWidth与minHeight并不会生效。如果发现生效的方式请务必告知。
flexDirection
在Flexbox中有主轴与副轴之分，主轴控制child的排列方向，默认为column。可以通过flexDirection属性改变主轴方向。它有四个可选值分别为
- row: child水平方向排列
- column: child竖直方向排列(默认)
- row-reverse: child水平方向反向排列
- column-reverse: child竖直方向反向排列
在上面的demo基础上改变style样式：
1const styles = StyleSheet.create({
2 container: {
3 flex: 1,
4 flexDirection: 'row',
5 justifyContent: 'center',
6 alignItems: 'center',
7 backgroundColor: '#F5FCFF',
8 },
9 red: {
10 height: 100,
11 width: 100,
12 backgroundColor: 'red'
13 },
14 blue: {
15 width: 100,
16 height: 100,
17 backgroundColor: 'blue'
18 },
19 orange: {
20 width: 100,
21 height: 100,
22 backgroundColor: 'orange'
23 }
24});分别改变container中flexDirection的值：row、row-reverse、column、column-reverse
justifyContent
固定好主轴之后，可以通过justifyContent来指定主轴方向child的排列方式，它有六个可选值
- flex-start: child对齐主轴的起点(默认)
- flex-end: child对齐主轴的终点
- center: child居中对齐主轴
- space-between: child在主轴方向相邻child等间距对齐，首尾child与父容器对齐
- space-around: child在主轴方向相邻child等间距对齐，首尾child与父容器的间距相等且为相邻child间距的一半
- space-evenly: child在主轴方向均匀分布。相邻间距与首尾间距相等
1 container: {
2 flex: 1,
3 flexDirection: 'row',
4 justifyContent: 'flex-start',
5 backgroundColor: '#F5FCFF',
6 }依次改变container中的justifyContent：flex-start、flex-end、center、space-between、space-around与space-evenly
alignItems
主轴固定之后，剩下的就是副轴，alignItems可以用来控制副轴上的child排列方式。它有五个可选项分别为
- flex-start: child对齐副轴起点(默认)
- flex-end: child对齐副轴终点
- center: child居中对齐副轴
- stretch: child为弹性布局时(未设置副轴方向的大小或者为auto)，拉伸对齐副轴
- baseline: 有文本存在时，child在副轴方向基于第一个文本基线对齐
改变container的style，主轴设置为row，依次改变alignItems：flex-start、flex-end、center
1 container: {
2 flex: 1,
3 flexDirection: 'row',
4 alignItems: 'flex-start',
5 backgroundColor: '#F5FCFF',
6 }最后将alignItems设置为stretch，并且改变red的height，red会被拉伸
1 container: {
2 flex: 1,
3 flexDirection: 'row',
4 alignItems: 'stretch',
5 backgroundColor: '#F5FCFF',
6 },
7 red: {
8 width: 100,
9 height: 'auto',
10 backgroundColor: 'red'
11 }
alignItems: baseline，并不是文本的正中心，而是文本View的容器底部。在上面基础上添加一个Text，让文本自身居中展示。
1 container: {
2 flex: 1,
3 flexDirection: 'row',
4 alignItems: 'baseline',
5 backgroundColor: '#F5FCFF',
6 },
7 text: {
8 width: 80,
9 height: 80,
10 fontSize: 20,
11 color: 'white',
12 marginTop: 110,
13 backgroundColor: 'black',
14 textAlign: 'center',
15 textAlignVertical: 'center'
16 }
flexWrap
如果再增加一个View，由于空间不足它会展示不全。这时可以使用flexWrap属性，它可以支持自动换行展示。
- nowrap: 不换行(默认)
- wrap: 自动换行
在container中添加flexWrap属性，并且再添加一个green view
1 container: {
2 flex: 1,
3 flexDirection: 'row',
4 flexWrap: 'wrap',
5 justifyContent: 'flex-start',
6 backgroundColor: '#F5FCFF',
7 },
8 green: {
9 width: 100,
10 height: 100,
11 backgroundColor: 'green'
12 }
alignSelf
alignSelf属性类似于alignItems，它也是控制副轴上的排列规则，不同的是它使用的对象是child自己。它可以改变父容器alignItems的属性控制的child排列规则，在副轴上实现自己的排列规则。默认值为auto，继承父容器的alignItems属性。因此它也有五个可选值：flex-start、flex-end、center、stretch与baseline。例如我们为range添加alignSelf，其它的child不变，都继承父容器的alignItems: flex-start
1 orange: {
2 width: 100,
3 height: 100,
4 backgroundColor: 'orange',
5 alignSelf: 'flex-end'
6 }
其它的可选值就不一一说明，可以参考alignItems
other
最后还有三个比较冷门属性，这里就不详细一一代码与贴图，简单的说下它们的作用，相同点是它们都是在child中使用，与alignSelf的作用域一样。
- flexBasis: 设置主轴方向上的初始值，默认为auto。如果与width或者height同时存在，则会覆盖它们的值
- flexGrow: 设置chid的放大比例，类似于flex，空间充足时自动按比例放大，默认为0
- flexShrink: 设置chid的缩小比例。空间不足时自动按比例缩小，默认为0
有关Flexbox，纵观全文只需掌握开头所列的六种属性，React Native中的绝大多数布局也就不成问题。现在对于Flexbox是否清晰了许多呢？赶紧亲自去试试吧~