React Native flex 布局使用總結(jié)

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

1. flexDirection : 對(duì)子布局方向的設(shè)置

    row : 從左到右依次排列
    row-reverse :從右向左依次排列
    column:(default) 從上到下排列
    column-reverse :從下到上排列
   

image.png

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

    wrap: 允許多行排列
    nowarp:(defaut) 不允許多行排列
   

   image.png

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

    flex-start:(default) 從行首開始排列。每行第一個(gè)彈性元素與行首對(duì)齊，同時(shí)所有后續(xù)的彈性元素與前一個(gè)對(duì)齊。
    flex-end: 從行尾開始排列。每行最后一個(gè)彈性元素與行尾對(duì)齊，其他元素將與后一個(gè)對(duì)齊。
    center: 伸縮元素向每行中點(diǎn)排列。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同。
    space-between: 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。
    space-around: 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半。
   

image.png

4. alignItems: 屬性以與justify-content相同的方式在側(cè)軸方向上將當(dāng)前行上的彈性元素對(duì)齊，默認(rèn)為stretch。

image.png

子視圖屬性

    上面介紹的是父視圖的屬性,接下來介紹的是子視圖的屬性

1. alignSelf : 定義子視圖相對(duì)父容器的屬性 相當(dāng)于在父視圖基礎(chǔ)上從新設(shè)置子視圖的位置

    enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
   
    stretch:元素被拉伸以適應(yīng)容器。
    center: 元素位于容器的中心。
    flex-start: 元素位于容器的開頭。
    flex-end: 元素位于容器的結(jié)尾。
   

image.png

2. flex :相當(dāng)于設(shè)置子視圖的權(quán)重

image.png

參考

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

源碼地址

鏈接 https://github.com/yxwandroid/rnMydemo

[圖片上傳失敗...(image-bc0399-1514193136293)]

關(guān)注公眾號(hào)獲取更多內(nèi)容

[圖片上傳失敗...(image-9f291-1514193136293)]