1、flexDirection

佈局中子檢視排放的方向。有兩個值：水平軸（row）,豎直軸（column）。預設是豎直軸。

flexDirection:'row'

flexDirection:'column'

'use strict';
import React,{Component} from 'react';
import {AppRegistry,View} from 'react-native';
class FixedDimensionsBasics extends Component{
    render(){
        return(
            <View style={{flex:1,flexDirection: 'row'}}>
                <View style={{width: 50,height: 50,backgroundColor: 'powderblue'}}></View>
                <View style={{width: 50, height: 50,backgroundColor: 'skyblue'}}></View>
                <View style={{width: 50, height: 50,backgroundColor: 'steelblue'}}></View>

            </View>
        );
    }
}
//MyFirstProject 必須初始化的專案名字
AppRegistry.registerComponent('MyFirstProject',() => FixedDimensionsBasics);
 

ps:powderblue、skyblue、steelblue 這些顏色值

參考：https://reactnative.cn/docs/0.42/colors.html#content

2、justifyContent

子元素沿著主軸的排列方式。有五個值：flex-start、center、flex-end、space-around以及space-between。預設是flex-start

flex-start:

center:

flex-end:

space-around:

space-between:

index.android.js:

'use strict';
import React,{Component} from 'react';
import {AppRegistry,View} from 'react-native';
class FixedDimensionsBasics extends Component{
    render(){
        return(
            <View style={{flex:1,flexDirection: 'column',justifyContent:'space-between'}}>
                <View style={{width: 50,height: 50,backgroundColor: 'powderblue'}}></View>
                <View style={{width: 50, height: 50,backgroundColor: 'skyblue'}}></View>
                <View style={{width: 50, height: 50,backgroundColor: 'steelblue'}}></View>

            </View>
        );
    }
}
//MyFirstProject 必須初始化的專案名字
AppRegistry.registerComponent('MyFirstProject',() => FixedDimensionsBasics);