React Native中的flexbox布局

分類： react native

說到布局，不論是android還是ios還是web前端，都有涉及到，react native中也有布局，主要採用了類似css中的flexbox布局，不過這種布局跟css中的flexbox布局稍微有點不同，下面就記錄在react native中使用flexbox布局的方法，主要涉及到如下幾個屬性：

1、flex

2、flexdirection

3、alignself

4、alignitems

5、justifycontent

還有其他的一些屬性，可以參考react native中文文件：或者css中有關flexbox屬性的文件：

下面就來一一解釋上面幾個屬性：

flex屬性的取值為整形（大於0），設定了flex屬性就代表該元素是可伸縮的，如下面的**：

class test extends component 
}const styles = ,
child1: ,
child2: ,
child3: 
};

在上面的**中，分別為child1, child2, child3設定了flex屬性為1, 1, 2，代表這三個元素在垂直方向上是按1:1:2的比例排列的，在手機上顯示出來的效果如下圖：

由上面的**和執行效果看來，flex屬性特別像android中的layout_weight屬性，都是設定元素的比例

flexdirection屬性有兩個取值，分別為'row'和'column'，代表某個元素中的子元素的排列方式為橫向排列（'row'）或縱向排列（'column'），不設定flexdirection屬性時，預設是按縱向排列的，所以在上圖中，我們看到三個元件是縱向排列的，在上面的**中，我們將styles中container的flexdirection屬性改為'row'，然後在手機上執行，結果如下圖所示：

即可證明，flexdirection設定為'row'後，子元素按橫向次序排列，如果設定為'column'或者不設定，則是按縱向排列

alignself屬性的取值比較多，有這麼幾個：'auto', 'flex-start', 'flex-end', 'center', 'stretch'，下面用乙個例子來展示alignself的幾個值得差異：

class test extends component 
}const styles = ,
text: ,
block1: ,
block2: ,
block3: ,
block4: ,
block5: 
};

上面的**在手機上執行的效果如下圖：

通過上面的例子可以看出，alignself的幾個屬性分別代表元素在容器中的位置，其中：

'center'表示元素位於容器的中心；

'flex-start'表示元素位於容器的開頭；

'flex-end'表示元素位於容器的結尾；

'stretch'表示元素將會拉伸以適應容器（當該元素沒有固定大小時）；

'auto'表示元素將會繼承父元素的alignitems屬性，若沒有父元素或者父元素沒有指定alignitems屬性時，則使用'stretch'屬性，在上面的例子中，如果將styles中的block4的樣式中，去掉width屬性再執行**，可以發現元素也在水平方向上充滿了父元素。

可以對比css中的align-self屬性：

跟alignself屬性類似，alignitems屬性有除'auto'外的其他幾個屬性，alignitems規定容器內各項的預設對齊方式，使用每個專案的 alignself 屬性可重寫 alignitems 實現。可以參考css中的align-items屬性：

justifycontent屬性可取的值有：'flex-start', 'flex-end', 'center', 'space-between', 'space-around'，可對比參考css中的屬性：

注：可通過同時設定alignitems: 'center'和justifycontent: 'center'來讓元素中的內容水平和垂直居中，下面用乙個例子來展示justifycontent的效果：

class test extends component 
}const styles = ,
text: ,
block: 
};

以上**在手機上的執行效果如下圖：

如果將container中的justifycontent改為flex-end，則執行效果如下：

如果將container中的justifycontent改為center，則執行效果如下：

如果將container中的justifycontent改為center，並加入alignitems:'center'，則執行效果如下：

從上面的**和效果圖可以比較得出：

alignitems主要設定容器中元素在水平方向上的布局，justifycontent主要設定容器中的元素在垂直方向上的布局（個人理解，如有不對請指正...）

React Native中的flexbox布局

在FlashDevelop中如何利用fl包元件？

react native開發中的 gradle命令

react native中timer的注意點

React Native中的flexbox布局

在FlashDevelop中如何利用fl包元件？

react native開發中的 gradle命令

react native中timer的注意點

相關推薦