React-Native中采用的是Flexbox布局，F(xiàn)lexbox與Android中的LinearLayout有相同之處，即：水平與垂直，兩個方向的布局，但Flexbox更為強大官疲。
Flexbox具體的屬于介紹可以百度查看。這里主要根據(jù)實例來講解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>
);
}
上述代碼中，出現(xiàn)兩次flex:1的屬性溢吻。
flex:1(一般該數(shù)字為1即可维费，和Android中的weight屬性類似),表示所在視圖填充滿所有剩余空間。
最外層view上用該屬性促王，則表示全屏展示犀盟。
中間的三個子view，分別表示上中下三個視圖蝇狼。第一個與第三個視圖有具體的高阅畴。中間的視圖有flex:1的屬性，表示中間的視圖填充滿除去第一個與第三個視圖后所有的空間迅耘。即可實現(xiàn)上中下三層布局贱枣。
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的值默認(rèn)為'column'，垂直排版春塌。
修改2：添加 alignItems:'stretch'屬性晓避，表示子視圖的填充滿父視圖。配合flexDirection屬性只壳，flexDirection為row的時候俏拱，alignItems:'stretch'表示子視圖的高填充滿父視圖。為column的時候吼句，表示子視圖的寬填充滿父視圖彰触。
修改3：在該View下添加了五個Text子視圖，每個子視圖有屬性flex:1命辖。flex:1表示填充滿剩余空間，五個都填充滿剩余空間分蓖，則會平分所有的空間尔艇。
3.繼續(xù)完善ing...
End總結(jié)
1.flex:1 填充滿剩余空間；
2.flexDirection:'row' 子布局水平排版么鹤，'column'表示子布局垂直排版终娃；
3.alignItems:'stretch' alignItems表示與主軸垂直方向的排布方式(主軸即父布局的排列方向，水平或者垂直)蒸甜。stretch表示與主軸垂直方向上填充滿父布局棠耕；center表示與主軸垂直方向居中；flex-start柠新，flex-end等窍荧。
