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'，子元素从上到下垂直排列：

<Text style={styles.label}>默认情况下父容器flexDirection:'column'，子元素从上到下垂直排列</Text>
<View style={[{},styles.container]}>
    <Text>测试</Text>
    <Text>测试</Text>
</View>

视图：

默认不设置flexDirection

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

<Text style={styles.label}>父容器flexDirection:'column'，子元素从左到右水平排列</Text>
<View style={[styles.container,{flexDirection:'row'}]}>
        <Text>测试</Text>
        <Text>测试</Text>
        <Text>测试</Text>
</View>

视图：

父容器设置flexDirection:'column'

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

<Text style={styles.label}>父容器flexDirection:'column'，子元素从上到下垂直排列，与默认情况父容器不设置flexDirection相同</Text>
<View style={[{flexDirection:'column',},styles.container]}>
    <Text>测试</Text> 
    <Text>测试</Text>
    <Text>测试</Text>
</View>

视图：

父容器flexDirection:'column'

flex

---

类似于Android中权重layout_weight的概念,需要配合flexDirection使用才有效果。

举例

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

<View style={[styles.container,{height:80}]}>
    <View style={{backgroundColor:'red',flex:1}}/>
    <View style={{height:20,backgroundColor:'green'}/>
</View>

视图：

父容器flexDirection默认,子元素flex:1

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

<Text style={styles.label}>父容器flexDirection:'row'时子元素从左到右水平排列;flex:1在水平方向起作用，表示水平方向占满全部父容器空间</Text> 
<View style={[{height:60,flexDirection:'row'},styles.container]}> 
    <View style={{height:20,flex:1,backgroundColor:'red'}}></View> 
    <View style={{height:20,width:100,backgroundColor:'green',}}></View> 
</View>

视图：

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

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

<Text style={styles.label}>父容器flexDirection:'column'，只有一个子元素;子元素flex:1,占满全部父容器空间，子元素height不起作用</Text> 
<View style={[{height:100,flexDirection:'column'},styles.container]}> 
    <View style={{flex:1,backgroundColor:'red',height:10,}}></View>
</View>

视图：

子元素占满父容器

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

<Text style={styles.label}>父容器flexDirection:'row'，只有一个子元素;子元素flex:1,占满全部父容器空间,子元素width不起作用</Text> 
<View style={[{height:100,flexDirection:'row'},styles.container]}> 
    <View style={{flex:1,backgroundColor:'red',width:10}}/>
</View>

视图：

子元素占满父容器

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

<Text style={styles.label}>父容器flexDirection:'row'，子元素在水平方向按比例分配父容器空间</Text> 
<View style={[{height:40,flexDirection:'row'},styles.container]}>
    <View style={{flex:1,backgroundColor:'red',height:20}}/>
    <View style={{flex:2,backgroundColor:'green',height:20}}/>
</View>

视图：

子元素1:2分配

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

<Text style={styles.label}>父容器flexDirection:'column'，子元素在垂直方向按比例分配父容器空间</Text>
<View style={[{height:100,flexDirection:'column'},styles.container]}> 
    <View style={{flex:1,backgroundColor:'red',width:20}}/>
    <View style={{flex:1,backgroundColor:'green',width:20}}/>
</View>

视图：

子元素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':

<Text style={styles.label}>水平方向左对齐，justifyContent:'flex-start'</Text> 
<View style={[{flexDirection:'row',justifyContent:'flex-start'},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View> 

视图：

水平方向左对齐

2.水平方向居中对齐，justifyContent:'center'：

<Text style={styles.label}>水平方向居中对齐，justifyContent:'center'</Text> 
<View style={[{flexDirection:'row',justifyContent:'center'},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text>
    <Text>测试</Text> 
</View> 

视图：

水平方向居中对齐

3.水平方向右对齐，justifyContent:'flex-end'：

<Text style={styles.label}>水平方向右对齐，justifyContent:'flex-end'</Text> 
<View style={[{flexDirection:'row',justifyContent:'flex-end'},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View>

视图：

水平方向右对齐

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

<Text style={styles.label}>水平方向元素之间间隔相同，justifyContent:'space-between'</Text> 
<View style={[{flexDirection:'row',justifyContent:'space-between'},styles.container]}>
    <Text>测试</Text>
    <Text>测试</Text> 
    <Text>测试</Text> 
</View> 

视图：

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

5.水平方向元素两边间隔相同，justifyContent:'space-around'：

<Text style={styles.label}>水平方向元素两边间隔相同，justifyContent:'space-around'</Text> 
<View style={[{flexDirection:'row',justifyContent:'space-around'},styles.container]}>
    <Text>测试</Text> 
    <Text>测试</Text>
    <Text>测试</Text> 
</View>

视图：

水平方向元素两边间隔相等

垂直方向即flexDirection:'column'时举例

1.垂直方向上对齐，justifyContent:'flex-start'

<Text style={styles.label}>垂直方向上对齐，justifyContent:'flex-start'</Text> 
<View style={[{flexDirection:'column',height:100,justifyContent:'flex-start',},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View> 

视图：

垂直方向上对齐

2.垂直方向居中对齐，justifyContent:'center'

<Text style={styles.label}>垂直方向居中对齐，justifyContent:'center'</Text> 
<View style={[{flexDirection:'column',height:100,justifyContent:'center',},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View> 

视图：

垂直方向居中对齐

3.垂直方向下对齐，justifyContent:'flex-end'

<Text style={styles.label}>垂直方向下对齐，justifyContent:'flex-end'</Text> 
<View style={[{flexDirection:'column',height:100,justifyContent:'flex-end',},styles.container]}>
    <Text>测试</Text> 
    <Text>测试</Text> 
</View> 

视图：

垂直方向下对齐

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

<Text style={styles.label}>垂直方向元素之间间隔相同，justifyContent:'space-between'</Text>
<View style={[{flexDirection:'column',height:100,justifyContent:'space-between',},styles.container]}>
    <Text>测试</Text>
    <Text>测试</Text> 
</View>

视图：

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

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

<Text style={styles.label}>垂直方向元素两边间隔相同，justifyContent:'space-around'</Text> 
<View style={[{flexDirection:'column',height:100,justifyContent:'space-around',},styles.container]}>
    <Text>测试</Text> 
    <Text>测试</Text> 
</View>

视图：

垂直方向元素两边间隔相同

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'

<Text style={styles.label}>水平方向左对齐，alignItems:'flex-start'</Text> 
<View style={[{flexDirection:'column',alignItems:'flex-start',},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View>

视图：

水平方向左对齐

2.水平方向居中对齐，alignItems:'center'

<Text style={styles.label}>水平方向居中对齐，alignItems:'center'</Text> 
<View style={[{flexDirection:'column',alignItems:'center',},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View> 

视图：

水平方向居中对齐

3.水平方向右对齐，alignItems:'flex-end'

<Text style={styles.label}>水平方向右对齐，alignItems:'flex-end'</Text> 
<View style={[{flexDirection:'column',alignItems:'flex-end',},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View>

视图：

水平方向右对齐

垂直方向即flexDirection:'row'时举例

1.垂直方向上对齐，alignItems:'flex-start'

<Text style={styles.label}>垂直方向上对齐，alignItems:'flex-start'</Text> 
<View style={[{flexDirection:'row',height:50,alignItems:'flex-start',},styles.container]}> 
    <Text>测试</Text>
    <Text>测试</Text> 
    <Text>测试</Text> 
</View> 

视图：

垂直方向上对齐

2.垂直方向居中对齐，alignItems:'center'

<Text style={styles.label}>垂直方向居中对齐，alignItems:'center'</Text> 
<View style={[{flexDirection:'row',height:50,alignItems:'center',},styles.container]}> 
     <Text>测试</Text> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View> 

视图：

垂直方向居中对齐

3.垂直方下对齐，alignItems:'flex-end'

<Text style={styles.label}>垂直方下对齐，alignItems:'flex-end'</Text> 
<View style={[{flexDirection:'row',height:50,alignItems:'flex-end',},styles.container]}> 
    <Text>测试</Text> 
    <Text>测试</Text> 
    <Text>测试</Text> 
</View>

视图：

垂直方下对齐

flexWrap

---

子元素超出容器时是否换行显示:
flexWrap:'wrap'，表示超出则换行显示，默认超出换行显示
flexWrap:'nowrap'，表示超出不换行显示

举例

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

<View style={{marginVertical:20,}}>
    <Text style={{fontSize:20,color:'#333333'}}>父容器设置flexWrap:'wrap'表明包裹内容，子元素超出父容器显示范围折行显示，默认情况不设置flexWrap就包裹内容</Text>
</View> 
<View style={{flexWrap:'wrap',flexDirection:'row'}}> 
    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
    <Text>测试</Text> <Text>测试</Text><Text>测试</Text>
    <Text>测试</Text> <Text>测试</Text><Text>测试</Text>
    <Text>测试</Text><Text>测试</Text> <Text>测试</Text>
    <Text>测试</Text><Text>测试</Text><Text>测试</Text> 
    <Text>测试</Text><Text>测试</Text><Text>测试</Text> 
    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
</View>

视图：

包裹内容

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

<View style={{marginVertical:20,}}>
    <Text style={{fontSize:20,color:'#333333'}}>父容器设置flexWrap:'nowrap'表明不包裹内容，子元素超出父容器部分不被显示，默认情况不设置flexWrap就包裹内容</Text>
</View> 
<View style={{flexWrap:'nowrap',flexDirection:'row'}}> 
    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
    <Text>测试</Text> <Text>测试</Text><Text>测试</Text>
    <Text>测试</Text> <Text>测试</Text><Text>测试</Text>
    <Text>测试</Text><Text>测试</Text> <Text>测试</Text>
    <Text>测试</Text><Text>测试</Text><Text>测试</Text> 
    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
</View>

视图：

不包裹内容

position

---

position:'absolute'，表示绝对布局；通过top，left，bottom，right指定相对于父容器的位置，默认不设置为相对布局。

<View style={{marginVertical:20,}}>
    <Text style={{fontSize:20,color:'#333333'}}>绝对位置</Text>
</View> 
<View style={{height:116,borderWidth:1,margin:5}}> 
    <Text style={{fontSize:16,position:'absolute',left:20,top:50}}>局对垂直居中</Text> 
</View>

视图：

绝对布局

以下贴出全部测试代码

---

'use strict';

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

class Demo extends Component {

    render() {
        return (
            <ScrollView style={{paddingTop:30}}>

                <Text style={styles.label}>父容器默认情况下(flexDirection:'column')子元素从上到下垂直排列，此时子元素默认水平方向填充父容器;子元素flex:1,在垂直方向起作用，表示垂直方向占满父容器空间</Text>
                <View style={[styles.container,{height:80}]}>
                    <View style={{backgroundColor:'red',flex:1}}></View>
                    <View style={{height:20,backgroundColor:'green'}}></View>
                </View>

                <Text style={styles.label}>父容器flexDirection:'row'时子元素从左到右水平排列;flex:1在水平方向起作用，表示水平方向占满全部父容器空间</Text>
                <View style={[{height:60,flexDirection:'row'},styles.container]}>
                    <View style={{height:20,flex:1,backgroundColor:'red'}}></View>
                    <View style={{height:20,width:100,backgroundColor:'green',}}></View>
                </View>

                <Text style={styles.label}>父容器flexDirection:'column'，只有一个子元素;子元素flex:1,占满全部父容器空间，子元素height不起作用</Text>
                <View style={[{height:100,flexDirection:'column'},styles.container]}>
                    <View style={{flex:1,backgroundColor:'red',height:10,}}></View>
                </View>

                <Text style={styles.label}>父容器flexDirection:'row'，只有一个子元素;子元素flex:1,占满全部父容器空间,子元素width不起作用</Text>
                <View style={[{height:100,flexDirection:'row'},styles.container]}>
                    <View style={{flex:1,backgroundColor:'red',width:10}}></View>
                </View>

                <Text style={styles.label}>父容器flexDirection:'row'，子元素在水平方向按比例分配父容器空间</Text>
                <View style={[{height:40,flexDirection:'row'},styles.container]}>
                    <View style={{flex:1,backgroundColor:'red',height:20}}></View>
                    <View style={{flex:2,backgroundColor:'green',height:20}}></View>
                </View>

                <Text style={styles.label}>父容器flexDirection:'column'，子元素在垂直方向按比例分配父容器空间</Text>
                <View style={[{height:100,flexDirection:'column'},styles.container]}>
                    <View style={{flex:1,backgroundColor:'red',width:20}}></View>
                    <View style={{flex:1,backgroundColor:'green',width:20}}></View>
                </View>


                <Text style={styles.label}>默认情况下父容器flexDirection:'column'，子元素从上到下垂直排列</Text>
                <View style={[{},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>父容器flexDirection:'column'，子元素从左到右水平排列</Text>
                <View style={[styles.container,{flexDirection:'row'}]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>父容器flexDirection:'column'，子元素从上到下垂直排列，与默认情况父容器不设置flexDirection相同</Text>
                <View style={[{flexDirection:'column',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>


                <View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>子元素元素水平排列</Text></View>


                <Text style={styles.label}>水平方向左对齐，justifyContent:'flex-start'</Text>
                <View style={[{flexDirection:'row',justifyContent:'flex-start'},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>水平方向居中对齐，justifyContent:'center'</Text>
                <View style={[{flexDirection:'row',justifyContent:'center'},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>水平方向右对齐，justifyContent:'flex-end'</Text>
                <View style={[{flexDirection:'row',justifyContent:'flex-end'},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>水平方向元素之间间隔相同，justifyContent:'space-between'</Text>
                <View style={[{flexDirection:'row',justifyContent:'space-between'},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>水平方向元素两边间隔相同，justifyContent:'space-around'</Text>
                <View style={[{flexDirection:'row',justifyContent:'space-around'},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>垂直方向上对齐，alignItems:'flex-start'</Text>
                <View style={[{flexDirection:'row',height:50,alignItems:'flex-start',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>垂直方向居中对齐，alignItems:'center'</Text>
                <View style={[{flexDirection:'row',height:50,alignItems:'center',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>垂直方下对齐，alignItems:'flex-end'</Text>
                <View style={[{flexDirection:'row',height:50,alignItems:'flex-end',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>


                <View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>子元素元素垂直排列</Text></View>


                <Text style={styles.label}>水平方向左对齐，alignItems:'flex-start'</Text>
                <View style={[{flexDirection:'column',alignItems:'flex-start',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>水平方向居中对齐，alignItems:'center'</Text>
                <View style={[{flexDirection:'column',alignItems:'center',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>水平方向右对齐，alignItems:'flex-end'</Text>
                <View style={[{flexDirection:'column',alignItems:'flex-end',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>垂直方向上对齐，justifyContent:'flex-start'</Text>
                <View style={[{flexDirection:'column',height:100,justifyContent:'flex-start',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>垂直方向居中对齐，justifyContent:'center'</Text>
                <View style={[{flexDirection:'column',height:100,justifyContent:'center',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>垂直方向下对齐，justifyContent:'flex-end'</Text>
                <View style={[{flexDirection:'column',height:100,justifyContent:'flex-end',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>垂直方向元素之间间隔相同，justifyContent:'space-between'</Text>
                <View style={[{flexDirection:'column',height:100,justifyContent:'space-between',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <Text style={styles.label}>垂直方向元素两边间隔相同，justifyContent:'space-around'</Text>
                <View style={[{flexDirection:'column',height:100,justifyContent:'space-around',},styles.container]}>
                    <Text>测试</Text>
                    <Text>测试</Text>
                </View>

                <View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>父容器设置flexWrap:'wrap'表明包裹内容，子元素超出父容器显示范围折行显示，默认情况不设置flexWrap就包裹内容</Text></View>
                <View style={{flexWrap:'wrap',flexDirection:'row'}}>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
                </View>

                <View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>父容器设置flexWrap:'nowrap'表明不包裹内容，子元素超出父容器部分不被显示，默认情况不设置flexWrap就包裹内容</Text></View>
                <View style={{flexWrap:'nowrap',flexDirection:'row'}}>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text>
                    <Text>测试</Text><Text>测试</Text><Text>测试</Text><Text>测试</Text>
                </View>


                <View style={{marginVertical:20,}}><Text style={{fontSize:20,color:'#333333'}}>绝对位置</Text></View>
                <View style={{height:116,borderWidth:1,margin:5}}>
                    <Text style={{fontSize:16,position:'absolute',left:20,top:50}}>局对垂直居中</Text>
                </View>

            </ScrollView>
        );
    }
}

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

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

---

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