React-Native flex 佈局使用總結

React-Native flex 佈局使用總結

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

1. flexDirection : 對子佈局方向的設定

    row : 從左到右依次排列
    row-reverse :從右向左依次排列
    column:(default) 從上到下排列
    column-reverse :從下到上排列
   複製程式碼

   

2. flexWrap: 定義子佈局是否在父佈局中多行排列

    wrap: 允許多行排列
    nowrap:(defaut) 不允許多行排列
   複製程式碼

   

3. justifyContent : 定義子元素之間的排列方式

    flex-start:(default) 從行首開始排列。每行第一個彈性元素與行首對齊，同時所有後續的彈性元素與前一個對齊。
    flex-end: 從行尾開始排列。每行最後一個彈性元素與行尾對齊，其他元素將與後一個對齊。
    center: 伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最後一個元素到行尾的距離相同。
    space-between: 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最後一個元素與行尾對齊。
    space-around: 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半。
   複製程式碼

4. alignItems: 屬性以與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊，預設為stretch。

子檢視屬性

    上面介紹的是父檢視的屬性,接下來介紹的是子檢視的屬性
複製程式碼

1. alignSelf : 定義子檢視相對父容器的屬性 相當於在父檢視基礎上從新設定子檢視的位置

    enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
   
    stretch:元素被拉伸以適應容器。
    center: 元素位於容器的中心。
    flex-start: 元素位於容器的開頭。
    flex-end: 元素位於容器的結尾。
   複製程式碼

2. flex :相當於設定子檢視的權重

參考

具體教程參考 http://www.jianshu.com/p/688b9108a922

原始碼地址

連結 https://github.com/yxwandroid/rnMydemo

關注公眾號獲取更多內容