React Native佈局

React Native中佈局採用的是FleBox(彈性框)進行佈局。在React Native中，有4個容器屬性，2個項目屬性，分別是：

 

容器(父視圖)屬性：flexDirection   flexWrap   justifyContent  alignItems

項目(子視圖)屬性：flex  alignSelf

一、flexDirection容器屬性: `row | row-reverse | column | column-reverse`,默認爲：'column'

　　row：主軸爲水平方向，起點在左端。

　　row-reverse：主軸爲水平方向，起點在右端。

　　column(默認值)：主軸爲垂直方向，起點在上沿。

　　column-reverse：主軸爲垂直方向，起點在下沿。

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.viewSize}>
          <Text style={ {fontSize:16}}>1</Text>
        </View>

        <View style={styles.viewSize}>
          <Text style={{fontSize:16}}>2</Text>
        </View>

        <View style={styles.viewSize}>
          <Text style={{fontSize:16}}>3</Text>
        </View>

        <View style={styles.viewSize}>
          <Text style={{fontSize:16}}>4</Text>
        </View>

        <View style={styles.viewSize}>
          <Text style={{fontSize:16}}>5</Text>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'gray',
    marginTop:30
  },

  viewSize:{
    width:40,
    height:40,
    backgroundColor:'purple',
    margin:5
  }

});

咱們先把flexDirection設置爲row，結果：

設置爲row-reverse就是反着的

設置爲column：

二、flexWrap容器屬性: `nowrap | wrap `

   默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

　2.1 nowrap(默認值)：不換行:

   

 

  2.2 wrap：換行，第一行在上方

   

 

3:justifyContent容器屬性:`flex-start | flex-end | center | space-between | space-around` ,定義了伸縮項目在主軸線的對齊方式

  flex-start(默認值)：伸縮項目向一行的起始位置靠齊。

  flex-end：伸縮項目向一行的結束位置靠齊。

  center：伸縮項目向一行的中間位置靠齊。

  space-between：兩端對齊，項目之間的間隔都相等。

  space-around：在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半。

 

四、alignItems容器屬性:`flex-start | flex-end | center | baseline | stretch`定義項目在交叉軸上如何對齊，能夠把其想像成側軸（垂直於主軸）的「對齊方式」。

  flex-start：交叉軸的起點對齊。

  flex-end：交叉軸的終點對齊 。

  center：交叉軸的中點對齊。

  baseline：項目的第一行文字的基線對齊。

  stretch（默認值）：彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度。

五、alignSelf項目屬性:「auto | flex-start | flex-end | center | baseline | stretch」。align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

 

六、flex項目屬性，number，比例。

七、其餘佈局

 

     7.一、視圖邊框

      borderLeftWidth number 左邊框寬度

　　borderRightWidth number 右邊框寬度

　　borderTopWidth number 頂部邊框寬度

　　borderWidth number 邊框寬度

　　border<Bottom|Left|Right|Top>Color 個方向邊框的顏色

　　borderColor 邊框顏色

 

   7.二、尺寸

　　width number

      height number

     7.3外邊距

　　margin number 外邊距

　　marginBottom number 下外邊距

　　marginHorizontal number 左右外邊距

　　marginLeft number 左外邊距

　　marginRight number 右外邊距

　　marginTop number 上外邊距

　　marginVertical number 上下外邊距

　　7.四、內邊距

　　padding number 內邊距

　　paddingBottom number 下內邊距

　　paddingHorizontal number 左右內邊距

　　paddingLeft number 作內邊距

　　paddingRight number 右內邊距

　　paddingTop number 上內邊距

　　paddingVertical number 上下內邊距

　　7.五、邊緣

　　left number 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

　　right number 屬性規定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移

　　top number 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。　　　　　

　　bottom number 屬性規定元素的底部邊緣。該屬性定義了一個定位元素的下外邊距邊界與其包含塊下邊界之間的偏移。

　　7.六、定位(position)

　　position enum('absolute', 'relative')屬性設置元素的定位方式，爲將要定位的元素定義定位規則。

　　absolute：生成絕對定位的元素，元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

　　relative：生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。