2、React Native中的flexbox布局

前端之家收集整理的这篇文章主要介绍了2、React Native中的flexbox布局前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

说到布局,不论是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://www.jb51.cc/article/p-fqngkvuh-bnv.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,alignSelf: 'flex-end',block3: {
		width: 150,alignSelf: 'center',block4: {
		width: 150,alignSelf: 'auto',block5: {
		height: 40,alignSelf: 'stretch',}
};
上面的代码在手机上运行的效果如下图:
通过上面的例子可以看出,alignSelf的几个属性分别代表元素在容器中的位置,其中:
'center'表示元素位于容器的中心;
'flex-start'表示元素位于容器的开头;
'flex-end'表示元素位于容器的结尾;
'stretch'表示元素将会拉伸以适应容器(当该元素没有固定大小时);
'auto'表示元素将会继承父元素的alignItems属性,若没有父元素或者父元素没有指定alignItems属性时,则使用'stretch'属性,在上面的例子中,如果将styles中的block4的样式中,去掉width属性再执行代码,可以发现元素也在水平方向上充满了父元素。

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','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>
			</View>
		);
	}
}

const styles = {
	container: {
		flex: 1,justifyContent: 'flex-start',block: {
		width: 150,}
};
以上代码在手机上的运行效果如下图:

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


如果将container中的justifyContent改为center,则运行效果如下:


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


从上面的代码效果图可以比较得出:
alignItems主要设置容器中元素在水平方向上的布局,justifyContent主要设置容器中的元素在垂直方向上的布局(个人理解,如有不对请指正...)
原文链接:https://www.f2er.com/react/307270.html

猜你在找的React相关文章