ReactNative Flexbox笔记

介绍

flexbox是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。

Flex容器

Flex container示意图

图中main axis和cross saxis分别为当前flex container的横竖轴，主轴main axis并不一定是水平的，而是由flexDirection决定，当flexDirection为column时才是水平的。
flexline这个属性值得一提。当flex布局时，一行容纳不下所有的flexitem时需要换行，这时每一行则为1个flexline。

盒模型

ReactNative中的flex是CSS中盒状模型的子集，因此在ReactNative中也可以使用盒模型属性进行布局：

Flex

容器属性

1. flexDirection

flexDirection属性决定主轴(main axix)的方向。ReactNative中flexDirection默认值为column，并且不支持row-reverse和column-reverse。
flexDirection: enum("column", "row")

2. flexWarp

flexWrap属性决定是否自动折行。
flexWrap enum('wrap', 'nowrap')

3. justifyContent

justifyContent属性主要作用于main axis，决定主轴上所有flex item的对齐方式。
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

justifyContent示例

4. alignItems

alignItems属性主要作用于cross axis，决定垂直主轴上所有flex item的对齐方式。
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')

alignItems示例

5. alignSelf

alignSelf属性主要作用于某个flex item，决定当前flex item垂直主轴上的对齐方式。
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')

6. flex

flex属性决定主轴上flex item间的比例。如果设置flex为0则表示尽量小。
宽度＝弹性宽度*(当前flex/sum(flexs))

单位问题

在ReactNative中使用flex进行布局时，我们通常会设置一些标签为固定大小。这时我们设置的宽度或者高度等不需要带单位，默认使用 pt 为单位。另外在ReactNative中，我们 不能使用百分比 来进行设置我们需要的大小数值，但我们可以通过 Dimenssions 和 PixelRatio 模块来获取窗口宽高和像素密度。

示例如下：
var dimensions = require('Dimensions'); var { width, height, } = dimensions.get('window');

var pixelRatio = PixelRatio.get();

ReactNative也支持一些其它工具方法来帮助我们获取需要的数值
例如：getPixelSizeForLayoutSize(); getFontScale();