React Native开发之——Flex布局

前言

React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中 LinearLayout的一种布局，但是要比 LinearLayout要强大的多。

本文主要讲述Flex布局，包含以下几个：

• flexDirection
• flexWrap
• justifyContent
• alignItems
• flex

Flex布局

Flex布局概念

图是W3C Flexbox布局模型：

flexbox由伸缩容器和伸缩项目组成；任何一个元素都可以指定flexbox布局，伸缩容器的子元素可以称为伸缩项目；伸缩项目使用伸缩布局模型来排版；在默认情况下，伸缩容器由两根轴组成：主轴(main axis)和交叉轴(cross axis)，主轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end；伸缩项目在主轴上占据的空间叫做main size，在交叉轴上占据的空间叫做cross size；

React Native目前版本为0.54， 本文所用属性位于APIs->Layout Props下

flexDirection

属性说明

flexDirection控制主轴的方向，它有四个值：

• ‘row’
• ‘row-reverse’
• ‘column’
• ‘column-reverse’

 

代码

 

效果图

 

flexWrap

属性说明

flexWrap控制当子view到达末尾时是否绕行，它有两个值(默认是nowrap)：

• wrap
• nowrap

 

代码

增加到12个Text

效果

flexWrap=nowrap时，如下：

 

flexWrap=wrap时，如下:

 

justifyContent

属性说明

justifyContent，用来定义伸缩项目沿主轴线的对其方式：，它有以下6个值：

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

 

代码

 

效果图

 

alignItems

属性说明

alignItems，用来定义交叉轴的对其方式：，它有以下5个值：

• flex-start
• flex-end
• center
• stretch
• baseline

 

代码

 

效果图

 

flex

属性说明

flex(数值型的属性值)：类似于Android中的layout-weight，用于收缩项目向右尽可能扩展。

代码

 

效果