Example

示例

下面的例子创建了一个 View，包含了两个有颜色的方块和一个自定义的组件，并且设置了一个内边距：

import React, { Component } from 'react';
import {  View,StyleSheet } from 'react-native';
export  class pageComponent extends Component {
    render() {
        return (
            // 尝试把`flexDirection`改为`column`看看
            <View style={styles.container}>
                <View style={styles.powderblue} />
                <View style={styles.skyblue} />
                <View style={styles.steelblue} />
        </View>
    );
    }
};
const styles = StyleSheet.create({
    container: {
        flex: 1, 
        flexDirection: 'row'
    },
    powderblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'powderblue'
    },
    skyblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'skyblue'
    },
    steelblue:{
        widtd: 50, 
        height: 50, 
        backgroundColor: 'steelblue'
    },
});