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'

每個屬性的值的意義如下：

flexDirection: 主軸的排列方向

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

flexWrap: 沿主軸排不下的時候，如何換行

    nowrap          // 默認，不換行，可能導致溢出
    wrap            // 換行，第一行在上方
    wrap-reverse    // 換行，第一行在下方

justifyContent: 項目在主軸上的排列方式

  center          // 居中
  flex-start      // 默認，左對齊
  flex-end        // 右對齊
  space-around    // 每個項目兩側的間隔相等。所以項目之間的間隔比項目與邊框的間隔大一倍
  space-between   // 兩端對齊，項目之間的間隔都相等，n-1個間隙
  space-evenly    // 兩端和項目之間的間隔都相等，n+1個間隙

alignItems: 項目在與主軸垂直的交叉軸上的排列方式

  baseline      // 項目的第一行文字的基線對齊
  center        // 交叉軸中點對齊
  flex-end      // 交叉軸終點對齊
  flex-start    // 交叉軸起點對齊
  stretch       // 默認，項目未設置高度或者設置未auto，將佔滿整個容器的高度

alignContent: 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

  center        // 與交叉軸中點對齊
  flex-end      // 與交叉軸的終點對齊
  flex-start    // 與交叉軸起點對齊
  space-around  // 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
  space-between // 與交叉軸兩端對齊，軸線之間的間隔平均分布
  stretch       // 默認，軸線佔滿整個交叉軸

alignSelf: 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 alignItems 屬性。

  auto          // 按照自身設置的寬高來顯示，如果沒設置，效果跟stretch一樣
  baseline      // 項目第一行文字的基線對齊
  center        // 位於中間位置
  flex-end      // 與父容器底部對齊
  flex-start    // 與父容器頂部對齊
  stretch       // 交叉軸拉伸，不設置具體的width/height的時候stretch才有效果

flexDirection: 'column'

flexDirection: 'column-reverse'

flexDirection: 'row'

flexDirection: 'row'

RN 布局#

背景#

內容#

來源#