743      小米  小米手環

React Native布局之FlexBox

概述

FlexBox（彈性框布局）：英文全稱the flexible box Module，FlexBox旨在提供了在不同尺寸設備上都能保持一致的布局方式。
其主要思想是：讓容器有能力讓其子項目能夠改變其寬度|高度|順序，以最佳方式填充可用空間。在布局中，首先得確定主軸方向(flexDirection)，主軸組件的對齊方式（justifyContent），側軸組件的對齊方式(alignItems)，通過以上四點可以基本確定布局。
注：FlexBox是CSS3彈性框布局規範，目前還處於最終征求意見稿 (Last Call Working Draft)階段，並不是所有的瀏覽器都支持Flexbox。

在學習FlexBox之前首先要清楚一個概念“寬和高”。一個組件的高度和寬度決定了它在屏幕上的尺寸，顯示的效果。

FlexBox屬性

為了更好的理解與應用FlexBox，我們先看一下FlexBox所具有的屬性。

主軸和側軸(橫軸和豎軸)

在學習屬性之前，讓我們先了解一個概念：主軸和側軸。

如圖：主軸即水平方向的軸線，可以理解成橫軸，側軸垂直於主軸，可以理解為豎軸。

flexDirection
該屬性確定了主軸方向。

justifyContent
該屬性確定了組件在主軸方向上的對齊方式。

alignItems
該屬性確定了組件在側軸方向上的對齊方式。

flexWrap
該屬性主要用作換行，默認情況下，項目都排列在一條線上，放不下的部分則不放置，flexWap就是定義是否換行的。。

代碼示例

<View style={ {flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20}}>
    <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>1</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>2</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>3</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>4</Text>
  </View>
  </View>

寬和高

在React Native中尺寸是沒有單位的，它代表了設備獨立像素。有點類似於Android的設備像素。
如：

<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}>
        <Text style={ {fontSize:16,margin:20}}>尺寸</Text>
</View>

上訴代碼：運行在Android上時，View的長和寬被解釋成：100dp 100dp單位是dp，字體被解釋成16sp 單位是sp，運行在iOS上時尺寸單位被解釋稱了pt，這些單位確保了布局在任何不同dpi的手機屏幕上顯示不會發生改變。

RN的FlexBox和css的FlexBox的異同

雖然React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一樣的。但是在某些方麵還是有細微區別的：

• flexDirection: React Native中默認為flexDirection:'column'，在Web CSS中默認為flex-direction:'row'
• alignItems: React Native中默認為alignItems:'stretch'，在Web CSS中默認align-items:'flex-start'
• flex: React Native中flex隻接受一個參數，而Web Css的flex可以接受多參數，如:flex: 2 2 10%
• RN不支持屬性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink

React Native

React Native布局屬性

以下屬性是React Native所支持的Flex屬性。

父視圖屬性(容器屬性)：

• flexDirection enum('row', 'column','row-reverse','column-reverse')
• flexWrap enum('wrap', 'nowrap')
• justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
• alignItems enum('flex-start', 'flex-end', 'center', 'stretch')

justifyContent

該屬性定義了瀏覽器如何分配順著父容器主軸的彈性（flex）元素之間及其周圍的空間，默認為flex-start。

代碼示例：

<View        style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

alignItems

屬性以與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊，默認為stretch。
屬性請參照本文開頭的講解。
代碼示例：

<View        style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

子視圖屬性

alignSelf

該屬性以屬性定義了flex容器內被選中項目的對齊方式。注意：alignSelf 屬性可重寫靈活容器的 alignItems 屬性。

代碼示例：

<View style={ {alignSelf:'baseline',width:60,height:    20,backgroundColor:"darkcyan",margin:5}}>
   <Text style={ {fontSize:16}}>1</Text>
</View>

flex

該屬性定義了一個可伸縮元素的能力，默認為0。類似於比重這麼一個概念（因其位於父視圖下麵，所以比重相當於所占的百分比）。

代碼示例：

<View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray",marginTop:20}}>
  <View style={ {flex:1,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:1</Text>
  </View>
  <View style={ {flex:2,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:2</Text>
  </View>
  <View style={ {flex:3,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:3</Text>
  </View>          
</View>

其他屬性

視圖邊框

外邊框

內邊框

邊緣

元素定位

最後更新：2017-04-08 23:00:13

  上一篇： DockerCon2017前瞻 - Docker企業版體驗

  下一篇： Spring注解(Annotations)書目錄