RN中布局样式

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';



export default class App extends Component<{}> {
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.item,styles.itemOne]}>
                    <Text style={styles.itemText}>
                        1
                    </Text>
                </View>
                <View style={[styles.item,styles.itemTwo]}>
                    <Text style={styles.itemText}>
                        2
                    </Text>
                </View>
                <View style={[styles.item,styles.itemThree]}>
                    <Text style={styles.itemText}>
                        3
                    </Text>
                </View>
            </View>
        );
    }
}

const styles=StyleSheet.create({
    container:{
        //名字为 container的具体样式
        backgroundColor:'#eae7ff',
        flex:1,
        paddingTop:23,
        flexDirection:'column',//主轴的方向
        /**
         * flexDirection 属性
         *  row 从左到右的方向
         *  column 从上到下的方向（默认  手机嘛）
         */
        justifyContent:'space-around' ,
        /**
         * justifyContent 属性
         *
         * 默认 的事 flex-start
         * center-居中
         * flex-end-显示到屏幕的下面
         * space-between->平均分配在界面上
         * space-around 中间的间距=两边的边距相加
         */
        alignItems:'flex-end'
        /**
         * alignItems 属性
         * flex-start (默认值）交叉轴上以开始位置对齐
         * stretch   (默认值）已拉伸的效果展示
         * center    交叉轴上以中间对齐（竖轴上）
         * flex-end  交叉轴上已结束位置对齐  （右对齐）
         */


    },
    item:{
        backgroundColor:'#fff',
        borderWidth:1,
        borderColor:'#6435c9',
        margin:6,
        flex:1  //可以将每个属性是item的View进行平均分配
    },
    itemOne:{
        alignSelf:'flex-start'
        /**
         * alignSelf   用来设置单独的伸缩项目在交叉轴上的对齐方式。会覆盖默认的对齐方式。
         * auto 默认的
         * flex-start 左对齐
         * flex-end  右对齐
         * center 中间对其
         */
    },
    itemTwo:{
        alignSelf:'center'
    },
    itemThree:{
        flex:2//单独的设置某个View的占的比例
    },
    itemText:{
        fontSize:33,
        fontFamily:'helvetica Neue',
        fontWeight:'200',
        color:'#6435c9',
        padding:30
    }
})