ReactNative flex 弹性布局

ReactNative 中flex弹性布局用法。

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

/*flex
 可以给组件制定flex,flex的值为数字。
 flex:1 表示 组件可以充满父组件所有的剩余空间
 同时存在多个并列的子组件，flex:1,均分空间
 如果这些并列的flex的值不一样，谁的值更大谁占据的空间越大
 （即占据剩余空间的比等于并列组件件flex值）
 */

let RnDemo = React.createClass({
    render: function () {
        return (
            <View style={styles.container}>
                <View style={styles.child1}></View>
                <View style={styles.child2}></View>
            </View>
        );
    }
});
let styles = StyleSheet.create({
    container: {
        marginTop: 10,
        flex: 1,
        backgroundColor: "cyan",
    },
    child1: {
        flex: 1,
        backgroundColor: "green",
    },
    child2: {
        flex: 2,
        backgroundColor: "yellow"
    },
});