React Native 页面布局

本文主要讲解与flex布局相关的属性，包括flex，flexDirection，alignItems，justifyContent，flexWrap等。React Native其他所有属性均在LayoutPropTypes.js中定义，在编辑器中搜索LayoutPropTypes.js即可看到。文末附所有测试代码。

首先定义几个样式，这样在视图中能更好的看到测试效果：

const styles = 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指定相对于父容器的位置，默认不设置为相对布局。

    绝对位置
 
 
    局对垂直居中 

视图：

绝对布局

以下贴出全部测试代码

---

'use strict';

import React, {ScrollView,Text,View,StyleSheet,AppRegistry} from 'react-native';

class Demo extends Component {

    render() {
        return (
            

                父容器默认情况下(flexDirection:'column')子元素从上到下垂直排列，此时子元素默认水平方向填充父容器;子元素flex:1,在垂直方向起作用，表示垂直方向占满父容器空间
                
                    
                    
                

                父容器flexDirection:'row'时子元素从左到右水平排列;flex:1在水平方向起作用，表示水平方向占满全部父容器空间
                
                    
                    
                

                父容器flexDirection:'column'，只有一个子元素;子元素flex:1,占满全部父容器空间，子元素height不起作用
                
                    
                

                父容器flexDirection:'row'，只有一个子元素;子元素flex:1,占满全部父容器空间,子元素width不起作用
                
                    
                

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

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


                默认情况下父容器flexDirection:'column'，子元素从上到下垂直排列
                
                    测试
                    测试
                

                父容器flexDirection:'column'，子元素从左到右水平排列
                
                    测试
                    测试
                    测试
                

                父容器flexDirection:'column'，子元素从上到下垂直排列，与默认情况父容器不设置flexDirection相同
                
                    测试
                    测试
                    测试
                


                子元素元素水平排列


                水平方向左对齐，justifyContent:'flex-start'
                
                    测试
                    测试
                    测试
                

                水平方向居中对齐，justifyContent:'center'
                
                    测试
                    测试
                    测试
                

                水平方向右对齐，justifyContent:'flex-end'
                
                    测试
                    测试
                    测试
                

                水平方向元素之间间隔相同，justifyContent:'space-between'
                
                    测试
                    测试
                    测试
                

                水平方向元素两边间隔相同，justifyContent:'space-around'
                
                    测试
                    测试
                    测试
                

                垂直方向上对齐，alignItems:'flex-start'
                
                    测试
                    测试
                    测试
                

                垂直方向居中对齐，alignItems:'center'
                
                    测试
                    测试
                    测试
                

                垂直方下对齐，alignItems:'flex-end'
                
                    测试
                    测试
                    测试
                


                子元素元素垂直排列


                水平方向左对齐，alignItems:'flex-start'
                
                    测试
                    测试
                    测试
                

                水平方向居中对齐，alignItems:'center'
                
                    测试
                    测试
                    测试
                

                水平方向右对齐，alignItems:'flex-end'
                
                    测试
                    测试
                    测试
                

                垂直方向上对齐，justifyContent:'flex-start'
                
                    测试
                    测试
                

                垂直方向居中对齐，justifyContent:'center'
                
                    测试
                    测试
                

                垂直方向下对齐，justifyContent:'flex-end'
                
                    测试
                    测试
                

                垂直方向元素之间间隔相同，justifyContent:'space-between'
                
                    测试
                    测试
                

                垂直方向元素两边间隔相同，justifyContent:'space-around'
                
                    测试
                    测试
                

                父容器设置flexWrap:'wrap'表明包裹内容，子元素超出父容器显示范围折行显示，默认情况不设置flexWrap就包裹内容
                
                    测试测试测试测试
                    测试测试测试
                    测试测试测试测试
                    测试测试测试测试
                    测试测试测试
                    测试测试测试测试
                

                父容器设置flexWrap:'nowrap'表明不包裹内容，子元素超出父容器部分不被显示，默认情况不设置flexWrap就包裹内容
                
                    测试测试测试测试
                    测试测试测试
                    测试测试测试测试
                    测试测试测试测试
                    测试测试测试
                    测试测试测试测试
                


                绝对位置
                
                    局对垂直居中
                

            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        borderWidth:1,
        padding:5,
        margin:5,
    },
    label: {
        color:'#333333',
        margin:5,
    },
});

AppRegistry.registerComponent('Demo', () => Demo);

---

参考资料
Flex布局，图片，文本，尺寸，像素与密度
React Native可用样式属性
Flex布局