React Native中的flexbox布局

分类： React Native

说到布局，不论是Android还是iOS还是web前端，都有涉及到，React Native中也有布局，主要采用了类似css中的flexbox布局，不过这种布局跟css中的flexbox布局稍微有点不同，下面就记录在React Native中使用flexbox布局的方法，主要涉及到如下几个属性：

1、flex

2、flexDirection

3、alignSelf

4、alignItems

5、justifyContent

还有其他的一些属性，可以参考React Native中文文档：http://wiki.jikexueyuan.com/project/react-native/flexbox.html，或者css中有关flexbox属性的文档：http://www.runoob.com/cssref/css3-pr-align-items.html

下面就来一一解释上面几个属性：

flex属性

flex属性的取值为整形（大于0），设置了flex属性就代表该元素是可伸缩的，如下面的代码：

class Test extends Component {
	render() {
		return (
			<View style={styles.container}>
				<View style={styles.child1}>
				</View>
				<View style={styles.child2}>
				</View>
				<View style={styles.child3}>
				</View>
			</View>
		);
	}
}

const styles = {
	container: {
		flex: 1, 
		flexDirection: 'column', //子元素垂直排列，默认是垂直排列的
	},
	child1: {
		flex: 1, 
		backgroundColor: '#aa0000',
	},
	child2: {
		flex: 1, 
		backgroundColor: '#aaaa00',
	},
	child3: {
		flex: 2, 
		backgroundColor: '#0000aa',
	}
};

在上面的代码中，分别为child1, child2, child3设置了flex属性为1, 1, 2，代表这三个元素在垂直方向上是按1:1:2的比例排列的，在手机上显示出来的效果如下图：

由上面的代码和运行效果看来，flex属性特别像Android中的layout_weight属性，都是设置元素的比例

flexDirection属性

flexDirection属性有两个取值，分别为'row'和'column'，代表某个元素中的子元素的排列方式为横向排列（'row'）或纵向排列（'column'），不设置flexDirection属性时，默认是按纵向排列的，所以在上图中，我们看到三个组件是纵向排列的，在上面的代码中，我们将styles中container的flexDirection属性改为'row'，然后在手机上运行，结果如下图所示：

即可证明，flexDirection设置为'row'后，子元素按横向次序排列，如果设置为'column'或者不设置，则是按纵向排列

alignSelf属性

alignSelf属性的取值比较多，有这么几个：'auto', 'flex-start', 'flex-end', 'center', 'stretch'，下面用一个例子来展示alignSelf的几个值得差异：

class Test extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Text style={[styles.block1, styles.text]}>alignSelf: 'flex-start'</Text>
				<Text style={[styles.block2, styles.text]}>alignSelf: 'flex-end'</Text>
				<Text style={[styles.block3, styles.text]}>alignSelf: 'center'</Text>
				<Text style={[styles.block4, styles.text]}>alignSelf: 'auto'</Text>
				<Text style={[styles.block5, styles.text]}>alignSelf: 'stretch'</Text>
			</View>
		);
	}
}

const styles = {
	container: {
		flex: 1,
	},
	text: {
		fontSize: 13,
		color: '#ff0000',
		marginTop: 10,
	},
	block1: {
		width: 150,
		height: 40,
		backgroundColor: '#6699ff',
		alignSelf: 'flex-start',
	},
	block2: {
		width: 150,
		height: 40,
		backgroundColor: '#6699ff',
		alignSelf: 'flex-end',	
	},
	block3: {
		width: 150,
		height: 40,
		backgroundColor: '#6699ff',
		alignSelf: 'center',	
	},
	block4: {
		width: 150,
		height: 40,
		backgroundColor: '#6699ff',
		alignSelf: 'auto',	
	},
	block5: {
		height: 40,
		backgroundColor: '#6699ff',
		alignSelf: 'stretch',	
	}
};

上面的代码在手机上运行的效果如下图：

通过上面的例子可以看出，alignSelf的几个属性分别代表元素在容器中的位置，其中：

'center'表示元素位于容器的中心；

'flex-start'表示元素位于容器的开头；

'flex-end'表示元素位于容器的结尾；

'stretch'表示元素将会拉伸以适应容器（当该元素没有固定大小时）；

'auto'表示元素将会继承父元素的alignItems属性，若没有父元素或者父元素没有指定alignItems属性时，则使用'stretch'属性，在上面的例子中，如果将styles中的block4的样式中，去掉width属性再执行代码，可以发现元素也在水平方向上充满了父元素。

可以对比css中的align-self属性：http://www.runoob.com/try/playit.php?f=playcss_align-self&preval=center

alignItems属性

跟alignSelf属性类似，alignItems属性有除'auto'外的其他几个属性，alignItems规定容器内各项的默认对齐方式，使用每个项目的 alignSelf 属性可重写 alignItems 实现。可以参考css中的align-items属性：http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=center

justifyContent属性

justifyContent属性可取的值有：'flex-start', 'flex-end', 'center', 'space-between', 'space-around'，可对比参考css中的属性：http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start

注：可通过同时设置alignItems: 'center'和justifyContent: 'center'来让元素中的内容水平和垂直居中，下面用一个例子来展示justifyContent的效果：

class Test extends Component {
	render() {
		return (
			<View style={styles.container}>
				<Text style={[styles.block, styles.text]}></Text>
				<Text style={[styles.block, styles.text]}></Text>
				<Text style={[styles.block, styles.text]}></Text>
				<Text style={[styles.block, styles.text]}></Text>
				<Text style={[styles.block, styles.text]}></Text>
			</View>
		);
	}
}

const styles = {
	container: {
		flex: 1,
		justifyContent: 'flex-start',
	},
	text: {
		fontSize: 13,
		color: '#ff0000',
		marginTop: 10,
	},
	block: {
		width: 150,
		height: 40,
		backgroundColor: '#6699ff',
	}
};

以上代码在手机上的运行效果如下图：

如果将container中的justifyContent改为flex-end，则运行效果如下：

如果将container中的justifyContent改为center，则运行效果如下：

如果将container中的justifyContent改为center，并加入alignItems:'center'，则运行效果如下：

从上面的代码和效果图可以比较得出：

alignItems主要设置容器中元素在水平方向上的布局，justifyContent主要设置容器中的元素在垂直方向上的布局（个人理解，如有不对请指正...）