React-native之flexDirection，justifyContent

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);