React Native模仿蒙德里安画风的布局

// 模仿蒙德里安画风的布局
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    parent: {
        borderWidth: 2,
        flex: 1,
        flexDirection: "row",
    },
    leftChild: {
        flex: 1,
        flexDirection: "column",
        backgroundColor: "#fff",
        borderRightWidth: 1
    },
    leftGrandChild1: {
        flex: 1,
        borderBottomWidth: 1
    },
    leftGrandChild2: {
        flex: 2,
        borderTopWidth: 1,
        borderBottomWidth: 1
    },
    leftGrandChild3: {
        flex: 1,
        backgroundColor: "#ccc",
        borderTopWidth: 1
    },
    rightChild: {
        flex: 2,
        flexDirection: "column",
        backgroundColor: "#ccc",
        borderLeftWidth: 1
    },
    topChild: {
        flex: 3,
        borderLeftWidth: 1,
        borderBottomWidth: 1
    },
    bottomChild: {
        flex: 1,
        flexDirection: "row",
        backgroundColor: "#fff",
    },
    left: {
        flex: 3,
        borderRightWidth: 1
    },
    right: {
        flex: 1,
        borderRightWidth: 1
    },
    rightOne: {
        flex: 1,
        borderBottomWidth: 1
    },
    rightTwo: {
        flex: 1,
        borderTopWidth: 1
    }

})
class flexBoxTest extends React.Component {
    render() {
        return (
            <View style={ styles.parent }>
                <View style={ styles.leftChild }>
                    <View style={ styles.leftGrandChild1 }></View>
                    <View style={ styles.leftGrandChild2 }></View>
                    <View style={ styles.leftGrandChild3 }></View>
                </View>
                <View style={ styles.rightChild }>
                    <View style={ styles.topChild }></View>
                    <View style={ styles.bottomChild }>
                        <View style={ styles.left}></View>
                        <View style={ styles.right }>
                            <View style={ styles.rightOne }></View>
                            <View style={ styles.rightTwo }></View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
export default flexBoxTest;

效果展示：