React Native 頁面布局

本文主要講解與flex布局相關(guān)的屬性保檐，包括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中權(quán)重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'表明包裹內(nèi)容嗜浮，子元素超出父容器顯示范圍折行顯示，默認情況不設置flexWrap就包裹內(nèi)容

<View style={{marginVertical:20,}}>
    <Text style={{fontSize:20,color:'#333333'}}>父容器設置flexWrap:'wrap'表明包裹內(nèi)容摩疑，子元素超出父容器顯示范圍折行顯示危融，默認情況不設置flexWrap就包裹內(nèi)容</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>

視圖：

包裹內(nèi)容

2.父容器設置flexWrap:'nowrap'表明不包裹內(nèi)容，子元素超出父容器部分不被顯示雷袋，默認情況不設置flexWrap就包裹內(nèi)容

<View style={{marginVertical:20,}}>
    <Text style={{fontSize:20,color:'#333333'}}>父容器設置flexWrap:'nowrap'表明不包裹內(nèi)容吉殃，子元素超出父容器部分不被顯示，默認情況不設置flexWrap就包裹內(nèi)容</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>

視圖：

不包裹內(nèi)容

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'表明包裹內(nèi)容，子元素超出父容器顯示范圍折行顯示棒旗，默認情況不設置flexWrap就包裹內(nèi)容</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'表明不包裹內(nèi)容喘批，子元素超出父容器部分不被顯示，默認情況不設置flexWrap就包裹內(nèi)容</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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末粥喜，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子橘券，更是在濱河造成了極大的恐慌额湘，老刑警劉巖，帶你破解...
沈念sama閱讀 216,544評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件旁舰，死亡現(xiàn)場離奇詭異锋华，居然都是意外死亡，警方通過查閱死者的電腦和手機箭窜，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,430評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門毯焕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人磺樱，你說我怎么就攤上這事纳猫。” “怎么了竹捉？”我有些...
開封第一講書人閱讀 162,764評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵芜辕，是天一觀的道長。經(jīng)常有香客問我块差，道長侵续，這世上最難降的妖魔是什么倔丈？我笑而不...
開封第一講書人閱讀 58,193評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮状蜗，結(jié)果婚禮上需五，老公的妹妹穿的比我還像新娘。我一直安慰自己轧坎，他們只是感情好宏邮，可當我...
茶點故事閱讀 67,216評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著眶根，像睡著了一般蜀铲。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上属百，一...
開封第一講書人閱讀 51,182評論 1贊 299
城市分裂傳說
那天记劝，我揣著相機與錄音，去河邊找鬼族扰。笑死厌丑，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的渔呵。我是一名探鬼主播怒竿，決...
沈念sama閱讀 40,063評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼扩氢！你這毒婦竟也來了耕驰？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,917評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤录豺，失蹤者是張志新（化名）和其女友劉穎朦肘，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體双饥，經(jīng)...
沈念sama閱讀 45,329評論 1贊 310
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡媒抠，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,543評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了咏花。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片趴生。...
茶點故事閱讀 39,722評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖昏翰，靈堂內(nèi)的尸體忽然破棺而出苍匆，到底是詐尸還是另有隱情，我是刑警寧澤棚菊，帶...
沈念sama閱讀 35,425評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布锉桑，位于F島的核電站，受9級特大地震影響窍株，放射性物質(zhì)發(fā)生泄漏民轴。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,019評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一球订、第九天我趴在偏房一處隱蔽的房頂上張望后裸。院中可真熱鬧，春花似錦冒滩、人聲如沸微驶。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,671評論 0贊 22
一樁弒父案开睡，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽因苹。三九已至，卻和暖如春篇恒，著一層夾襖步出監(jiān)牢的瞬間扶檐，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,825評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工胁艰，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留款筑，地道東北人。一個月前我還...
沈念sama閱讀 47,729評論 2贊 368
代替公主和親
正文我出身青樓腾么，卻偏偏與公主長得像奈梳，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子解虱，可洞房花燭夜當晚...
茶點故事閱讀 44,614評論 2贊 353