React Native布局詳解

Flexbox 布局

Flex有兩個屬性：Container  和 Item

flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。采用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex項目（flex item），簡稱"項目"。

 

 

容器屬性

簡述：

• flexDirection（決定容器內所有子元素item的排列方向（即主軸方向），如row子元素橫排，column子元素豎排）
• justifyContent（定義了子元素Item在主軸方向上的排列方式，如center就居中，flex-start就是左端為開頭）
• alignItems（子元素沿豎直軸的排列方式，flex-start就靠上，center就放中間線）
• flexWrap（定義是否換行，nowrap就不換行，wrap就換行）

 

常用：

 

1、flexDirection ： 用來決定容器內所有子元素Item的排列方向，默認是豎直軸方向，即兩個View豎直排列

（想讓子元素橫向並列就用flexDirection:'row'）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

 

2、justifyContent：定義了子元素Item在主軸方向上的排列方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

　

3、alignItems子元素沿豎直軸的排列方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

不常用：

1、flexWrap默認容器中的子元素Item都排列在一條軸線上，flexWrap屬性定義了如果在一條軸線上排列不下所有的Item元素，可以進行換行排列

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默認值）：不換行

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

wrap-reverse：換行，第一行在下方

 

元素屬性：

1、flex 布局權重

1:0：flex=0的項目占用空間僅為內容所需空間，flex=1的項目會占據其余所有空間

 在部分組件指定了height的情況下，flex是“除了height以外剩余空間”的分布比例。例如：

<View style={{height:100}}>
    <View style={{flex: 3}} />
    <View style={{flex: 2}} />
</View>

兩個子View的高度分別是 60和40。寬度同理

Flex計算規則詳見：https://blog.csdn.net/u010377383/article/details/79661859

 

2、alignSelf

項目交叉軸方向自身對齊方式

 

 

從項目經驗總結的常用方法：

1、設置border邊線的方法

borderRightWidth: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
borderBottomWidth: 1,
borderBottomColor:'#f5f5f5',

2、通過flex布局將一個圖標移到最右端的常用方法

圖標外層嵌套一個View，View的style如下：

imgRightStyle:{
        flex:1,
        flexDirection:'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
},

解釋下：flex將剩余空間占滿，flexDirection使得View主軸為橫向軸，justifyContent使得row的起始端為右端，alignItem將圖標上下居中。

 

參考：

https://www.jianshu.com/p/4a61a517c792

https://blog.csdn.net/codetomylaw/article/details/52190636