RN布局

RN布局

背景

今年以来，公司新来的总监力推ReactNative，目标是做大前端，H5选用React，客户端用ReactNative，所以我要再“复习”一下网页布局。顺便把内容记录到自己的博客中，用宝儿姐的话来说：“机智的一bi”。

内容

Flex布局：Flex是Flexible Box的缩写。设为Flex布局之后，子元素的float、clear、和verti-align属性将失效。

容器属性：
经常设置在容器上的属性有：

  flexDirection   // 主轴的排列方向
  flexWrap        // 沿主轴排不下的时候，如何换行
  justifyContent  // 项目在主轴上的排列方式
  alignItems      // 项目在交叉轴上的排列方式
  alignContent    // 多根轴线的对齐方式。如果只有一根轴线，该属性不起作用
  alignSelf       // 允许单个项目有与其他项目不一样的对齐方式，可覆盖alignItems属性

每个属性的可设置的值如下:

  flexDirection:    'column' | 'column-reverse' | 'row' | 'row-reverse'
  flexWrap:         'nowrap' | 'wrap' | 'wrap-reverse'
  justifyContent:   'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'space-evenly'
  alignItems:       'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'
  alignContent:     'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch'
  alignSelf:        'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'

每个属性的值的意义如下：

1. flexDirection: 主轴的排列方向

    column         // 默认的排列方式，从上往下排列
    column-reverse // 从下往上排列
    row            // 从左到右排列
    row-reverse    // 从右到左排列

2. flexWrap: 沿主轴排不下的时候，如何换行

    nowrap          // 默认，不换行，可能导致溢出
    wrap            // 换行，第一行在上方
    wrap-reverse    // 换行，第一行在下方

3. justifyContent: 项目在主轴上的排列方式

  center          // 居中
  flex-start      // 默认，左对齐
  flex-end        // 右对齐
  space-around    // 每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍
  space-between   // 两端对齐，项目之间的间隔都相等，n-1个间隙
  space-evenly    // 两端和项目之间的间隔都相等，n+1个间隙

4. alignItems: 项目在与主轴垂直的交叉轴上的排列方式

  baseline      // 项目的第一行文字的基线对齐
  center        // 交叉轴中点对齐
  flex-end      // 交叉轴终点对齐
  flex-start    // 交叉轴起点对齐
  stretch       // 默认，项目未设置高度或者设置未auto，将占满整个容器的高度

5. alignContent: 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  center        // 与交叉轴中点对齐
  flex-end      // 与交叉轴的终点对齐
  flex-start    // 与交叉轴起点对齐
  space-around  // 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  space-between // 与交叉轴两端对齐，轴线之间的间隔平均分布
  stretch       // 默认，轴线占满整个交叉轴

6. alignSelf: 允许单个项目有与其他项目不一样的对齐方式，可覆盖alignItems属性。

  auto          // 按照自身设置的宽高来显示，如果没设置，效果跟stretch一样
  baseline      // 项目第一行文字的基线对齐
  center        // 位于中间位置
  flex-end      // 与父容器底部对齐
  flex-start    // 与父容器顶部对齐
  stretch       // 交叉轴拉伸，不设置具体的width/height的时候stretch才有效果

<table>
<tr>
<td ><center><img src="https://i.loli.net/2020/09/22/tFuAimYg7zXnseE.jpg" width="50%" ><center>flexDirection: 'column'</center></center></td>
<td ><center><img src="https://i.loli.net/2020/09/22/YyE7tXM6p85KCWD.jpg" ><center>flexDirection: 'column-reverse'</center></center></td>
<td ><center><img src="https://i.loli.net/2020/09/22/ZRT2yjLVPIQnkuE.jpg" width="50%" ><center>flexDirection: 'row'</center></center></td>
<td ><center><img src="https://i.loli.net/2020/09/22/sYhuZaU1mw6ykV3.jpg" ><center>flexDirection: 'row'</center></center></td>
</tr>
</table>

来源

• Flex 布局教程：语法篇
• React16免费视频教程（共28集）
• React Native中文网