Flexbox布局在RN開發(fā)中至關(guān)重要看彼，它用來指定某個組件的子元素布局方式廊佩，可以使用一套布局適應(yīng)多種屏幕，一般情況靖榕，使用三種布局方式就可以滿足大部分情況：
1标锄、flexDirection：決定組件的布局方向，包括column（默認(rèn)）茁计、row料皇。
2、alignItems：決定子元素在次軸的布局方向（與主軸垂直的軸）星压，可選項包括flex-start践剂、center、flex-end娜膘、stretch（次軸方向必須無固定尺寸才生效）逊脯。
3、justifyContent：子元素在主軸上的排列方式竣贪，包括flex-start军洼、center、flex-end演怎、space-around匕争、space-between。
在使用Flexbox布局的時候爷耀，我們還可以根據(jù)屏幕的寬度來布局甘桑，充滿整個屏幕
const windowWidth = Dimensions.get('window').width;
export default class FlexView extends Component{
render(){
return(
<View style={{
//flex:1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
//backgroundColor: 'green',
}}>
<View style={{flex:1, opacity:0.5, width: windowWidth, height: 50, backgroundColor: 'red'}} />
<View style={{flex:2, opacity:0.5, width: windowWidth, height: 50, backgroundColor: 'blue'}} />
<View style={{flex:1, opacity:0.5, width: windowWidth, height: 50, backgroundColor: 'gray'}} />
</View>
);
}
}
這里，在子布局里歹叮，使用flex跑杭，數(shù)值不同，會根據(jù)數(shù)值的比例去設(shè)定大小盗胀，opacity是用來設(shè)計透明度的艘蹋，可以查看view的相關(guān)屬性和style。
下一篇票灰，我來簡單的說下滾動視圖女阀。
