4.1.1 Box 盒子模型

在 RN 中所有组件都可以看成一个盒子，包括：边距，边框，填充，和实际内容，盒子模型包括 width ，height ，padding，margin，border等样式，参考图4-1 图4-1盒子模型

通过这几个样式控制组件的宽，高，内边距，外边距，边框。 修改 src/pages/IndexPage 代码，实现图4-1 效果，代码如下：

type Props = {};
export default class IndexPage extends Component<Props> {

    render() {
        return ( // 渲染布局
            <View style={styles.container}>
                <StatusBar barStyle={'dark-content'} backgroundColor={'#fff'}/>
                {/*父布局*/}
                <View style={{borderWidth:2}}>
                    <View style={styles.boxStyle}>
                        {/*子布局*/}
                        <View style={{flex:1,backgroundColor:'red'}}/>
                    </View>
                </View>
            </View>
        );
    }
}
// 样式文件
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    boxStyle: {
        width: 200,
        height: 200,
        padding: 30, //内边距
        margin: 50, //外边距
        borderWidth: 20, //边框宽度
        borderColor: 'green', //边框颜色
    }
});