React Native - FlexBox弹性盒模型

FlexBox布局

1. 什么是FlexBox布局?

弹性盒模型(The Flexible Box Module),又叫FlexBox,意为"弹性布局",旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒模型提供最大的灵活性.
Flex布局主要思想是: 让容器有能力让其子项目能够改变其宽度,高度(甚至是顺序), 以最佳方式填充可用空间;
React Native中的FlexBox是这个规范的子集.

2. FlexBox在开发中的应用场景

2.1 FlexBox在布局中能够解决什么问题?

浮动布局
各种机型屏幕适配
水平和垂直居中
自动分配宽度
... ...

2.2 在CSS中,常规的布局是基于块和内联流方向,而Flex布局是基于flex-flow流,稀土很好解释了Flex布局的思想:

容器默认存在两根轴: 水平的主轴(main axis) 和垂直的主轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end; 交叉轴的开始位置叫做cross start, 结束位置叫做cross end.
项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size.

2.3 根据伸缩项目排列方式的不同,主轴和测轴方向也有所变化:

3. FlexBox的常用属性

3.1 容器属性

flexDirection:
row | row-reverse | column | column-reverse
- 该属性决定主轴的方向(即项目的排列方向).
- row : 主轴为水平方向,起点在左端
- row-reverse : 主轴为垂直方向,起点在右端.
- column(默认值) : 主轴为垂直方向,起点在上沿.
- column-reverse : 主轴为垂直方向,起点在下沿.

justifyContent: flex-start | flex-end | center | space-between | space-around
- 定义了伸缩项目在主轴线的对齐方式
- flex-start(默认值): 伸缩项目向一行的起始位置靠齐.
- flex-end: 伸缩项目向一行的结束位置靠齐.
- center: 伸缩项目向一行的中间位置靠齐.
- space-between: 两端对齐,项目之间的间隔都相等.
- space-around: 伸缩项目会平均的分布在行里,两端保留一半的空间.

alignItems: flex-start | flex-end | center | baseline | stretch
- 定义项目在交叉轴上如何对齐, 可以把其想象成侧轴(垂直于主轴)的"对齐方式"
- flex-start: 交叉轴的起点对齐
- flex-end: 交叉轴的终点对齐
- center: 交叉轴的重点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch(默认值): 如果项目未设置高度或设为auto,将占满整个容器的高度

flexWrap: nowrap | wrap | wrap-reverse
- 默认情况下,项目都排在一条线(又称"轴线")上. flex-wrap属性定义,如果一条轴线排不下,如何换行.
- nowrap(默认值): 不换行
- wrap: 换行, 第一行在上方.
- wrap-reverse: 换行,第一行在下方. (和wrap相反)

3.2 元素属性

flex
- "flex-grow", "flex-shrink" 和 "flex-basis"三个属性的缩写, 其中第二个和第三个参数("flex-shrink" 和 "flex-basis")是可选参数.
- 默认值为"0 1 auto".
- 宽度 = 弹性宽度 * ( flexGrow / sum( flexGorw ) )
alignSelf: "auto | flex-start | flex-end | center | baseline | stretch"
- align-self属性允许单个项目有与其他项目不一样的对齐方式, 可覆盖align-item属性. 默认值为auto, 表示继承父元素的align-items属性,如果没有父元素, 则等同于stretch.

4. 在React Native中使用Flexbox

4.1 获取当前屏幕的宽度,高度,分辨率

var Dimensions = require('Dimensions');export default class myApp extends Component {render() {return (<View style={styles.container}><View style={styles.innerView1}></View><View style={styles.innerView2}></View><View style={styles.innerView3}></View><Text>屏幕宽度是{Dimensions.get('window').width}</Text><Text>屏幕高度是{Dimensions.get('window').height}</Text><Text>屏幕分辨率是{Dimensions.get('window').scale}</Text></View>);}
}