使用Flexbox布局

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

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

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

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

1.    flexDirection可以决定布局的主轴。子元素是应该沿着水平轴（row）方向排列还是竖轴（column）方向排列。

flexDirection:'row',backgroundColor:'red'}}>

 

 

 

flexDirection:’row’、flexDirection:’row-reverse’显示的如下图

row

row-reverse

flexDirection: 'column', backgroundColor:'red'}}>

  

  

   

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和默认的一样在开始处排列。

justifyContent:'flex-start',backgroundColor:'red'}}>

 

justifyContent:'flex-start'

2）flex-end

justifyContent:'flex-end',backgroundColor:'red'}}>

 

 

justifyContent:'flex-end'

3）center

,justifyContent:'center',backgroundColor:'red'}}>

  

  

   

justifyContent:'center'

4）space-around

justifyContent:'space-around',backgroundColor:'red'}}>

,justifyContent:'space-around'

5）space-between

justifyContent:'space-between',backgroundColor:'red'}}>

 

justifyContent:'space-between'

alignItems:'center',backgroundColor:'red'}}>

 

 

 

alignItems:'center'

alignItems:'flex-start',backgroundColor:'red'}}>

 

 

 

alignItems:'flex-start'

alignItems:'flex-end',backgroundColor:'red'}}>

 

alignItems:'flex-end'

alignItems:'flex-start',backgroundColor:'red'}}>

alignItems:'flex-start'

alignItems:'flex-start',backgroundColor:'red'}}>

alignItems:'flex-start'

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