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布局

最后编辑于：2017.12.03 06:00:13

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,835评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,598评论 1赞 295
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,569评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,159评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,533评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,710评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,923评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,674评论 0赞 203
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,421评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,622评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,115评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,428评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,114评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,097评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,875评论 0赞 197
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,753评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,649评论 2赞 271