React Native - 2 控件Flexbox

 

*強烈建議使用Genymotion模擬器，比AVD速度快，功能強大。

 

1. flexDirection

Flexbox是連續佈局，它有主軸（primary axis）和交叉軸（cross axis）組成，使用flexDirection屬性來肯定主軸的方向，它包括水平（row）和垂直（column）兩個值，默認是column。

 

1.1 水平佈局

修改自動生成的代碼文件，/index.android.js，

 

styles:

 

results:

 

1.2 垂直佈局，修改L41，flexDirection:'column',

 

 

2.  justifyContent，設置元素沿主軸的對齊方式，包括5種屬性

2.1 flex-start：伸縮項目與父容器左端靠齊
    

2.2 flex-end：與父容器右端靠齊

    

2.3 center：水平居中

    

    

2.4 space-between：第一個子組件位於父容器左端，最後一個子組件位於父容器最右端。而後平均分配在父容器水平方向上

    

2.5 space-around：全部子組件平均分配在父容器的水平方向上，左右都有留空隙

    

 

3. 用於定義子組件在交叉軸方向上的對齊方式。有四個屬性可設置：flex-start，flex-end，center，stretch。

咱們須要設置元素的高度，

　　

3.1 flex-start：與父組件的頂部對齊

    

3.2 flex-end：與父組件的底部對齊

    

3.3 center：處於父容器的中間位置

    

3.4 stretch：豎直上填充整個容器

    

 

4. flex，定義同級別元素的相對大小，它只關心相對值，好比下面的1：2：3，和10：20：30是同樣的結果。

    修改內容以下，注意，在元素上直接添加樣式時，別忘了加「[]」，參見L18和L22。

    

 

　　運行結果，2的寬度是1的兩倍，3的寬度是1的三倍