React Native中使用flexbox規(guī)則來制定某個(gè)組件的子元素的布局残邀。

使用flexDirection嗅定、alignItems和justifyContent三個(gè)樣式屬性就能滿足大多數(shù)布局的需要慷丽。

下面看看到底怎么用這些屬性布局：

首先定義四個(gè)view赎瑰，一個(gè)大小是主屏幕大小,顏色為紅色,其他都是長(zhǎng)寬為50的view召庞，顏色分別是藍(lán)色锡垄、綠色稚虎、黃色。顏色雖然有點(diǎn)土偎捎，顏色明顯蠢终，希望能看懂Ｐ蛉痢！寻拂！

1.????flexDirection可以決定布局的主軸程奠。子元素是應(yīng)該沿著水平軸（row）方向排列還是豎軸（column）方向排列。

<View?style={{flex:1,flexDirection:'row',backgroundColor:'red'}}>

?<View?style={{width:?50,?height:?50,?backgroundColor:?'blue'}}/>

?<View?style={{width:?50,?height:?50,?backgroundColor:?'green'}}/>

?<View?style={{width:?50,?height:?50,?backgroundColor:?'yellow'}}/>

</View>

flexDirection:’row’祭钉、flexDirection:’row-reverse’顯示的如下圖

row

row-reverse

<View style={{flex: 1, flexDirection: 'column', backgroundColor:'red'}}>

?? <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />

?? <View style={{width: 50, height: 50, backgroundColor: 'green'}} />

??? <View style={{width: 50, height: 50, backgroundColor: 'yellow'}} />

</View>

flexDirection:’column’瞄沙、flexDirection:’column-reverse’顯示如下圖：

column

column-reverse

2.????Justify Content

在組件的style中制定justifyContent可以決定其子元素沿著主軸的排列方式。子元素是應(yīng)該靠近主軸的起始端還是末尾段分布慌核，對(duì)應(yīng)項(xiàng)有flex-start距境、center、flex-end垮卓、space-around以及space-between垫桂。沒有設(shè)置flexDirection默認(rèn)是主軸是縱向的。

1）flex-start和默認(rèn)的一樣在開始處排列粟按。

<View style={{flex: 1,justifyContent:'flex-start',backgroundColor:'red'}}>

?<View style={{width: 50, height: 50, backgroundColor: 'blue'}}/>

<View style={{width: 50, height: 50, backgroundColor: 'green'}}/>

<View style={{width: 50, height: 50, backgroundColor: 'yellow'}}/>

</View>

justifyContent:'flex-start'

2）flex-end

<View style={{flex: 1,justifyContent:'flex-end',backgroundColor:'red'}}>

<View style={{width: 50, height: 50, backgroundColor: 'blue'}}/>

?<View style={{width: 50, height: 50, backgroundColor: 'green'}}/>

? <View style={{width: 50, height: 50, backgroundColor: 'yellow'}}/>

</View>

justifyContent:'flex-end'

3）center

<View style={{flex: 1,justifyContent:'center',backgroundColor:'red'}}>

?? <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />

?? <View style={{width: 50, height: 50, backgroundColor: 'green'}} />

??? <View style={{width: 50, height: 50, backgroundColor: 'yellow'}}/>

</View>

justifyContent:'center'

4）space-around

<View style={{flex: 1,justifyContent:'space-around',backgroundColor:'red'}}>

<View style={{width: 50, height: 50, backgroundColor: 'blue'}}/><View style={{width: 50, height: 50, backgroundColor: 'green'}}/><View style={{width: 50, height: 50, backgroundColor: 'yellow'}}/>

</View>

,justifyContent:'space-around'

5）space-between

<View style={{flex: 1,justifyContent:'space-between',backgroundColor:'red'}}>

<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'green'}} />

?<View style={{width: 50, height: 50, backgroundColor: 'yellow'}} />

</View>

justifyContent:'space-between'

<View style={{flex: 1,alignItems:'center',backgroundColor:'red'}}>

?<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />

?<View style={{width: 50, height: 50, backgroundColor: 'green'}} />

? <View style={{width: 50, height: 50, backgroundColor: 'yellow'}} />

</View>

alignItems:'center'

<View style={{flex: 1,alignItems:'flex-start',backgroundColor:'red'}}>

?<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />

?<View style={{width: 50, height: 50, backgroundColor: 'green'}} />

? <View style={{width: 50, height: 50, backgroundColor: 'yellow'}}/>

</View>

alignItems:'flex-start'

<View style={{flex: 1,alignItems:'flex-end',backgroundColor:'red'}}>

?<View style={{width: 50, height: 50, backgroundColor: 'blue'}} /> <View style={{width: 50, height: 50, backgroundColor: 'green'}} />

<View style={{width: 50, height: 50, backgroundColor: 'yellow'}}/>

</View>

alignItems:'flex-end'

<View?style={{flex: 1,alignItems:'flex-start',backgroundColor:'red'}}>

<View?style={{width: 50,?height: 50,?backgroundColor:?'blue'}} /> <View?style={{width: 50,?height: 50,?backgroundColor:?'green'}} />

<View?style={{width: 50,?height: 50,?backgroundColor:?'yellow'}}/>

</View>

alignItems:'flex-start'

<View?style={{flex: 1,alignItems:'flex-start',backgroundColor:'red'}}>

<View?style={{width: 50,height: 50,backgroundColor:'blue'}} /> <View?style={{width: 50,height: 50,backgroundColor:'green'}} />

<View?style={{width: 50,height: 50,backgroundColor:'yellow'}}/>

alignItems:'flex-start'

以上就是根據(jù)參數(shù)編寫程序的效果圖诬滩，供理解和參考。