使用Flexbox布局

React Native中使用flexbox规则来制定某个组件的子元素的布局。

使用flexDirection、alignItems和justifyContent三个样式属性就能满足大多数布局的需要。

下面看看到底怎么用这些属性布局：

首先定义四个view，一个大小是主屏幕大小,颜色为红色,其他都是长宽为50的view，颜色分别是蓝色、绿色、黄色。颜色虽然有点土，颜色明显，希望能看懂！！！

1.    flexDirection可以决定布局的主轴。子元素是应该沿着水平轴（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可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布，对应项有flex-start、center、flex-end、space-around以及space-between。没有设置flexDirection默认是主轴是纵向的。

1）flex-start和默认的一样在开始处排列。

<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'

以上就是根据参数编写程序的效果图，供理解和参考。