React-Native中采用的是Flexbox布局，Flexbox与Android中的LinearLayout有相同之处，即：水平与垂直，两个方向的布局，但Flexbox更为强大。
Flexbox具体的属于介绍可以百度查看。这里主要根据实例来讲解Flexbox的一些用处。
1.上中下三层布局
上图为常见的上中下三层布局。
render() {
//ios需要距离顶部20像素
var y = Platform.OS === 'ios' ? 20 : 0;
return (
<View style={{flex:1}}>
<View style={{height:50, backgroundColor:'#FFA500', marginTop: y }}/>
<View style={{flex:1, backgroundColor:'#FF83FA'}}/>
<View style={{height:50, backgroundColor:'#F08080'}}/>
</View>
);
}
上述代码中，出现两次flex:1的属性。
flex:1(一般该数字为1即可，和Android中的weight属性类似),表示所在视图填充满所有剩余空间。
最外层view上用该属性，则表示全屏展示。
中间的三个子view，分别表示上中下三个视图。第一个与第三个视图有具体的高。中间的视图有flex:1的属性，表示中间的视图填充满除去第一个与第三个视图后所有的空间。即可实现上中下三层布局。
2.底部按钮平分布局
上图中底部添加了五个布局平分了底部的宽度。
render() {
//ios需要距离顶部20像素
var y = Platform.OS === 'ios' ? 20 : 0;
return (
<View style={{flex:1}}>
<View style={{height:50, backgroundColor:'#FFA500', marginTop: y}}/>
<View style={{flex:1, backgroundColor:'#FF83FA'}}/>
<View style={{flexDirection:'row',alignItems:'stretch',height:50, backgroundColor:'#F08080'}}>
<Text style={{flex:1, backgroundColor:'#E0FFFF'}}>1</Text>
<Text style={{flex:1, backgroundColor:'#DEB887'}}>2</Text>
<Text style={{flex:1, backgroundColor:'#D02090'}}>3</Text>
<Text style={{flex:1, backgroundColor:'#D15FEE'}}>4</Text>
<Text style={{flex:1, backgroundColor:'#CDCD00'}}>5</Text>
</View>
</View>
);
}
上述代码在第三个子View中做了修改；
修改1：添加flexDirection:'row'属性，表示该视图的子视图将水平方向排版。flexDirection的值默认为'column'，垂直排版。
修改2：添加 alignItems:'stretch'属性，表示子视图的填充满父视图。配合flexDirection属性，flexDirection为row的时候，alignItems:'stretch'表示子视图的高填充满父视图。为column的时候，表示子视图的宽填充满父视图。
修改3：在该View下添加了五个Text子视图，每个子视图有属性flex:1。flex:1表示填充满剩余空间，五个都填充满剩余空间，则会平分所有的空间。
3.继续完善ing...
End总结
1.flex:1 填充满剩余空间；
2.flexDirection:'row' 子布局水平排版，'column'表示子布局垂直排版；
3.alignItems:'stretch' alignItems表示与主轴垂直方向的排布方式(主轴即父布局的排列方向，水平或者垂直)。stretch表示与主轴垂直方向上填充满父布局；center表示与主轴垂直方向居中；flex-start，flex-end等。
