【RN - 基础】之FlexBox弹性布局

前言

弹性盒模型（The Flexible Box Module），又叫FlexBox，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同的屏幕，为盒装模型提供最大的灵活性。

FlexBox在大部分情况下都是处理Item在Container中位置和尺寸的关系。

FlexBox在布局中能解决很多问题，如浮动布局、屏幕适配、水平垂直居中、自动分配宽度等。

FlexBox布局属性

flexDirection主轴方向：

flexDirection属性用来设置主轴的方向，即视图中子控件的排列顺序，有如下几种选项：

• column（默认值）：子控件从上向下排列；
• column-reverse：子控件从下向上排列；
• row：子控件从左向右排列；
• row-reverse：子控件从右向左排列。

justifyContent对齐方式：

justifyContent属性用来设置伸缩项在主轴线的对齐方式，有如下几种选项：

• flex-start（默认值）：向主轴方向的起始端靠齐；
• flex-end：向主轴方向的结尾端靠齐；
• center：向主轴中间靠齐；
• space-between：两段靠齐，项之间间隔相等，主轴两段没有空隙；
• space-around：项平均的分布在主轴上，每个项的两段都有空隙。

alignItems侧轴对齐方式：

alignItems属性用来设置伸缩项在侧轴上的对齐方式（侧轴永远垂直于主轴），有如下几种选项：

• stretch（默认值）：如果没有设置项的高度或设置为auto，则项将占满侧轴；
• flex-start：向侧轴方向的起始端靠齐；
• flex-end：向侧轴方向的末尾端靠齐；
• center：向侧轴的中间靠齐。

flexWrap流式布局样式：

flexWrap属性用来设置流式布局（当所有项不能显示在一行中时，换行显示）的样式，有如下几种选项：

• nowrap（默认值）：不换行；
• wrap：换行，新行在旧行下方；
• wrap-reverse：换行，新行在旧行上方。

注意：flexWrap属性在iOS上可以正常设置，但在Android上如果不加额外的设置，则只会显示第一行，解决方法是添加style：alignItems: ’flex-start’

FlexBox元素属性

flex元素比重：

flex属性是flex-grow、flex-shrink和flex-basis三个属性的组合体，其中后两个属性是可选属性。三个属性具体解释如下：

• flex-grow：元素占当前容器中的弹性宽度的比重，默认是0；
• flex-shrink：缩小元素的宽度，值越大缩的越小，默认值是1；
• flex-bisis：相当于CSS中的width属性，默认值是auto。

元素在容器中的宽度/高度的计算公式：宽/高度 = 弹性宽度 * (flow-grow / sum(flow-grow));

alignSelf：

alignSelf属性允许单个元素有与其他元素不一样的对齐方式，有如下几种选项：

• auto（默认值）：集成父容器的对齐方式，如果没有父容器，则相当于stretch；
• flex-start：当前元素向父容器的起始端靠齐；
• flex-end：当前元素向父容器的结尾端靠齐；
• center：当前元素向父容器的中间靠齐；
• stretch：当前元素拉伸铺满父容器。

注意：alignSelf属性相当于将父容器的alignItems属性进行了覆盖。

FlexBox其他方法

获取当前屏幕的宽度（高度、分辨率使用同样方法获取）：

let Dimensions = require('Dimensions');
let width = Dimensions.get('window').width;

获取当前屏幕的宽度、高度、分辨率：

let Dimensions = require('Dimensions');
let {width, height, scale} = Dimensions.get('window');

补充参考

【Flex布局教程 - 语法篇】

【Flex布局教程 - 实例篇】