React Native 頁面佈局簡介

本文主要講解與flex佈局相關的屬性，包括flex，flexDirection，alignItems，justifyContent，flexWrap等。React Native其他所有屬性均在LayoutPropTypes.js中定義，在編輯器中搜尋LayoutPropTypes.js即可看到。文末附所有測試程式碼。

首先定義幾個樣式，這樣在檢視中能更好的看到測試效果：

conststyles = StyleSheet.create({// 父容器樣式container: {        borderWidth:1,        padding:5,        margin:5,    },// 文字標籤樣式label: {        color:'#333333',        margin:5,    },});

flexDirection

子元素在父容器中的排列方向:

flexDirection:'row',  水平排列

flexDirection:'column',  垂直排列

子元素排列方向舉例

1.預設情況下父容器flexDirection:'column'，子元素從上到下垂直排列：

預設情況下父容器flexDirection:'column'，子元素從上到下垂直排列測試測試

檢視：

預設不設定flexDirection

2.父容器flexDirection:'column'，子元素從左到右水平排列：

父容器flexDirection:'column'，子元素從左到右水平排列測試測試測試

檢視：

父容器設定flexDirection:'column'

3.父容器flexDirection:'column'，子元素從上到下垂直排列，與預設情況父容器不設定flexDirection相同：

父容器flexDirection:'column'，子元素從上到下垂直排列，與預設情況父容器不設定flexDirection相同測試測試測試

檢視：

父容器flexDirection:'column'

flex

類似於Android中權重layout_weight的概念,需要配合flexDirection使用才有效果。

舉例

1.父容器預設情況下(flexDirection:'column')子元素從上到下垂直排列，此時子元素預設水平方向填充父容器;子元素flex:1,在垂直方向起作用，表示垂直方向佔滿父容器空間：

檢視：

父容器flexDirection預設,子元素flex:1

2.父容器flexDirection:'row'時子元素從左到右水平排列;flex:1在水平方向起作用，表示水平方向佔滿全部父容器空間:

父容器flexDirection:'row'時子元素從左到右水平排列;flex:1在水平方向起作用，表示水平方向佔滿全部父容器空間

檢視：

父容器flexDirection:'row'子元素flex:1

3.父容器flexDirection:'column'，只有一個子元素;子元素flex:1,佔滿全部父容器空間，子元素height不起作用:

父容器flexDirection:'column'，只有一個子元素;子元素flex:1,佔滿全部父容器空間，子元素height不起作用

檢視：

子元素佔滿父容器

4.父容器flexDirection:'row'，只有一個子元素;子元素flex:1,佔滿全部父容器空間,子元素width不起作用:

父容器flexDirection:'row'，只有一個子元素;子元素flex:1,佔滿全部父容器空間,子元素width不起作用

檢視：

子元素佔滿父容器

5.父容器flexDirection:'row'，子元素在水平方向按比例分配父容器空間:

父容器flexDirection:'row'，子元素在水平方向按比例分配父容器空間

檢視：

子元素1:2分配

6.父容器flexDirection:'column'，子元素在垂直方向按比例分配父容器空間:

父容器flexDirection:'column'，子元素在垂直方向按比例分配父容器空間

檢視：

子元素1:1分配

justifyContent

表示在水平方向或垂直方向子元素的對齊方式，需要配合flexDirection使用。

當父容器flexDirection:'row'時

justifyContent:'flex-start'，表示子元素水平方向左對齊

justifyContent:'center'，表示子元素水平居中對齊

justifyContent:'flex-end'，表示子元素水平方向右對齊

justifyContent:'space-between'，表示子元素水平方向元素之間間隔相同

justifyContent:'space-around'，表示子元素水平方向元素兩邊間隔相同

當父容器flexDirection:'column'時

justifyContent:'flex-start'，表示子元素垂直方向上對齊

justifyContent:'center'，表示子元素垂直居下對齊

justifyContent:'flex-end'，表示子元素垂直方向居中對齊

justifyContent:'space-between'，表示垂直方向子元素之間間隔相同

justifyContent:'space-around'，表示垂直方向子元素兩邊間隔相同

水平方向即flexDirection:'row'時舉例

1.水平方向左對齊，justifyContent:'flex-start':

水平方向左對齊，justifyContent:'flex-start'測試測試測試

檢視：

水平方向左對齊

2.水平方向居中對齊，justifyContent:'center'：

水平方向居中對齊，justifyContent:'center'測試測試測試

檢視：

水平方向居中對齊

3.水平方向右對齊，justifyContent:'flex-end'：

水平方向右對齊，justifyContent:'flex-end'測試測試測試

檢視：

水平方向右對齊

4.水平方向元素之間間隔相同，justifyContent:'space-between'：

水平方向元素之間間隔相同，justifyContent:'space-between'測試測試測試

檢視：

水平方向元素之間間隔相等

5.水平方向元素兩邊間隔相同，justifyContent:'space-around'：

水平方向元素兩邊間隔相同，justifyContent:'space-around'測試測試測試

檢視：

水平方向元素兩邊間隔相等

垂直方向即flexDirection:'column'時舉例

1.垂直方向上對齊，justifyContent:'flex-start'

垂直方向上對齊，justifyContent:'flex-start'測試測試

檢視：

垂直方向上對齊

2.垂直方向居中對齊，justifyContent:'center'

垂直方向居中對齊，justifyContent:'center'測試測試

檢視：

垂直方向居中對齊

3.垂直方向下對齊，justifyContent:'flex-end'

垂直方向下對齊，justifyContent:'flex-end'測試測試

檢視：

垂直方向下對齊

4.垂直方向元素之間間隔相同，justifyContent:'space-between'

垂直方向元素之間間隔相同，justifyContent:'space-between'測試測試

檢視：

垂直方向元素之間間隔相同

5.垂直方向元素兩邊間隔相同，justifyContent:'space-around'

垂直方向元素兩邊間隔相同，justifyContent:'space-around'測試測試

檢視：

垂直方向元素兩邊間隔相同

alignItems

表示在水平方向或垂直方向子元素的對齊方式，需要配合flexDirection使用。與之相似的還有alignSelf，alignSelf表示自己相對於父容器的對齊方式，用法與alignItems相同。這裡要注意，alignItems與justifyContent在flexDirection上的對齊方向相反。

當父容器flexDirection:'column'時

alignItems:'flex-start'，表示子元素水平方向左對齊

alignItems:'center'，表示子元素水平居中對齊

alignItems:'flex-end'，表示子元素水平方向右對齊

當父容器flexDirection:'row'時

alignItems:'flex-start'，表示子元素垂直方向上對齊

alignItems:'center'，表示子元素垂直居下對齊

alignItems:'flex-end'，表示子元素垂直方向居中對齊

水平方向即flexDirection:'column'時舉例

1.水平方向左對齊，alignItems:'flex-start'

水平方向左對齊，alignItems:'flex-start'測試測試測試

檢視：

水平方向左對齊

2.水平方向居中對齊，alignItems:'center'

水平方向居中對齊，alignItems:'center'測試測試測試

檢視：

水平方向居中對齊

3.水平方向右對齊，alignItems:'flex-end'

水平方向右對齊，alignItems:'flex-end'測試測試測試

檢視：

水平方向右對齊

垂直方向即flexDirection:'row'時舉例

1.垂直方向上對齊，alignItems:'flex-start'

垂直方向上對齊，alignItems:'flex-start'測試測試測試

檢視：

垂直方向上對齊

2.垂直方向居中對齊，alignItems:'center'

垂直方向居中對齊，alignItems:'center'測試測試測試

檢視：

垂直方向居中對齊

3.垂直方下對齊，alignItems:'flex-end'

垂直方下對齊，alignItems:'flex-end'測試測試測試

檢視：

垂直方下對齊

flexWrap

子元素超出容器時是否換行顯示:

flexWrap:'wrap'，表示超出則換行顯示，預設超出換行顯示

flexWrap:'nowrap'，表示超出不換行顯示

舉例

1.父容器設定flexWrap:'wrap'表明包裹內容，子元素超出父容器顯示範圍折行顯示，預設情況不設定flexWrap就包裹內容

父容器設定flexWrap:'wrap'表明包裹內容，子元素超出父容器顯示範圍折行顯示，預設情況不設定flexWrap就包裹內容測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試

檢視：

包裹內容

2.父容器設定flexWrap:'nowrap'表明不包裹內容，子元素超出父容器部分不被顯示，預設情況不設定flexWrap就包裹內容

父容器設定flexWrap:'nowrap'表明不包裹內容，子元素超出父容器部分不被顯示，預設情況不設定flexWrap就包裹內容測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試

檢視：

不包裹內容

position

position:'absolute'，表示絕對佈局；通過top，left，bottom，right指定相對於父容器的位置，預設不設定為相對佈局。

絕對位置局對垂直居中

檢視：