react-native 使用Flexbox布局

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

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

export default class FlexDirectionBasics extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <View style={{ flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center'}}>
                <View style={{ width: 50,height: 50,backgroundColor: 'red' }}>
                    <Text>美丽的夜晚</Text>
                </View>
                <View style={{ width: 50,height: 50,backgroundColor: 'blue' }}>
                    <Text>学习学习</Text>
                </View>
                <View style={{ width: 50,height: 50,backgroundColor: 'yellow' }}>
                    <Text>嗨皮</Text>
                </View>
                <View style={{ width: 50,height: 50,backgroundColor: 'black'}}>
                    <Text>我旁边有你</Text>
                </View>
            </View>
        )
    }
}
AppRegistry.registerComponent('xiao', () => FlexDirectionBasics);