Flexbox意为弹性布局，可以简便、完整、响应式地实现各种页面布局，正如官方所说Flexbox旨在为不同的屏幕尺寸上提供一致的布局体验，通常我们在react native中使用的属性主要有flex，flexDirection，alignItems，和justifyContent ，并且通常是其几种的组合形式。
1 flex
flex属性会按照其设定值把屏幕等分，组件显示按照百分比显示自身大小，其实这和Android中LinearLayout的weight属性非常像，权重的概念，如果理解weight属性，那么flex就没问题了，下面结合实例来说
例如：
style1:{
flex:1,
backgroundColor:'red'
},
style2:{
flex:1,
backgroundColor:'green'
},
style3:{
flex:1,
backgroundColor:'blue'
}
render(){
return(
<View style={{flex:1}}>
<Text style={styles.style1}>style1样式</Text>
<Text style={styles.style2}>style2样式</Text>
<Text style={styles.style3}>style3样式</Text>
</View>
);
}
显示效果为：
因为三个style的flex属性值均为一所以，屏幕垂直方向被三等分，每个text组件的高度为屏幕的三分之一。
修改style2的flex属性值为2
style2:{
flex:1,
backgroundColor:'green'
}
显示效果为：
style2的高度大约为style1和style3的2倍，因为此时屏幕被分成了1+2+1=4份，style2占其中2份为1/2，其他为1/4。
此外需要注意的事，当使用flex属性时，其所在组件的父组件必须设定flex属性或者width，height值，否则组件无法显示。
上边我们设置了view的style={{flex:1}}，如果改成height:100,显示效果如下：
但是设置成width:100时，style1,style2,style3也是无法显示的，因为此时布局方向默认为垂直方向，需要更改布局方向后才能生效，下面会说如何更改屏幕的布局方向。
2 flexDirection
flexDirection属性可以设定组件的布局方向，分别为垂直（column）和水平（row）,默认为垂直方向，是不是感觉和Android里边LinearLayout的 android:orientation="vertical|horizontal"属性非常类似，只不过LinearLayout默认为水平方向。下面看实例
垂直方向:
render(){
return(
<View style={{height:100,flexDirection:'column'}}>
<Text style={styles.style1}>style1样式</Text>
<Text style={styles.style2}>style2样式</Text>
<Text style={styles.style3}>style3样式</Text>
</View>
);
}
显示效果为：
水平方向：
render(){
return(
<View style={{flexDirection:'row'}}>
<Text style={styles.style1}>style1样式</Text>
<Text style={styles.style2}>style2样式</Text>
<Text style={styles.style3}>style3样式</Text>
</View>
);
}
显示效果为：
注意看上边垂直方向是设置了height:100,如果去掉组件就无法显示了，但是当是水平方向时没有设定宽高值，也正常显示了，为什么会这样还不太理解，要是有人知道希望指点我一下。
3 justifyContent
justifyContent属性可以指定组件在父组件布局方向上的分布情况，共有flex-start, center, flex-end, space-around, space-between这5中分布，默认为flex-start，效果如下：
flex-start：
center：
flex-end：
space-around：
space-between：
选择合适的布局方向可以大大节约布局时间。
4 alignItems
alignItems是一种辅助对齐方式，如果flexDirection设置为水平方向，则alignItems在垂直方向生效，反之亦然。可能不太好理解，还是看例子吧
例如：
<View style={{flex: 1,flexDirection:'column',alignItems : 'center'}}>
<Text style={styles.style1}>style1样式</Text>
<Text style={styles.style2}>style2样式</Text>
<Text style={styles.style3}>style3样式</Text>
</View>
显示效果为：
而
<View style={{flex: 1,flexDirection:'row',alignItems : 'center'}}>
<Text style={styles.style1}>style1样式</Text>
<Text style={styles.style2}>style2样式</Text>
<Text style={styles.style3}>style3样式</Text>
</View>
显示效果为：
alignItems共有flex-start, center, flex-end, stretch四中属性值
以flexDirection:'column'为例
flex-start
center
flex-end
stretch
stretch有点特殊，它是一种拉伸效果，要使stretch生效，在其生效方向不能固定组件的宽度或者高度值，也就是说，如果flexDirection:'column'则不能设置子组件的width值，如果flexDirection:'row'则不能设置子组件的height值否则无效。
例如垂直方向
style1:{
height:56,
backgroundColor:'red'
},
style2:{
height:56,
backgroundColor:'green'
},
style3:{
height:56,
backgroundColor:'blue'
}
<View style={{flex: 1,flexDirection:'column',alignItems : 'stretch'}}>
<Text style={styles.style1}>style1样式</Text>
<Text style={styles.style2}>style2样式</Text>
<Text style={styles.style3}>style3样式</Text>
</View>
显示效果为：
注意看style1,2,3均没有设置width属性。
水平方向
style1:{
width:56,
backgroundColor:'red'
},
style2:{
width:56,
backgroundColor:'green'
},
style3:{
width:56,
backgroundColor:'blue'
}
<View style={{flex: 1,flexDirection:'row',alignItems : 'stretch'}}>
<Text style={styles.style1}>style1样式</Text>
<Text style={styles.style2}>style2样式</Text>
<Text style={styles.style3}>style3样式</Text>
</View>
显示效果为：
到这里基本上flexbox常用属性就说完了，你应该可以用flexbox完成各种布局效果了。
如果想了解其他更多的属性，可以看这里
学了这么多总得做点东西吧，那就做个Android里边的导航栏吧，要实现的最终效果如下：
答案在评论区（答案可不止一种哦，仔细想想还可以通过哪些属性实现吧）。
网友评论