React Native学习之样式与flexbox布局(二)

1、样式的定义可以使用两种方式：
第一种：

export default class App extends Component {
    render() {
        return (
            <View style={{backgroundColor: '#ff0000'}}>
                <MyCustomComponent
                    name={'zhangsan'}
                    age={18}
                />
            </View>
        )
    }
}

第二种：

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <MyCustomComponent
                    name={'zhangsan'}
                    age={18}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        backgroundColor: "#ff0000"
    }
});

2、flexbox布局：
1)flexDirection:在组件的style中指定flexDirection可以决定布局的主轴，设置为row，则水平轴为主轴，设置为column，则垂直轴为主轴；
在根部局View中，默认的排列方式是按列排列(column)，可以使用flexDirection来改变布局的排列方式，下面的样式是按行排列

style={{flexDirection:'row'}}

2)justifyContent：在组件的style中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end、space-around以及space-between；
当flexDirection为row时，设置justifyContent为center则可实现水平居中排列；
当flexDirection为column时，设置justifyContent为center，如果想实现在屏幕垂直方向居中对齐，这时需要配合flex=1来使用，flex=1可以使View在column方向撑满所有的剩余空间；

//垂直方向居中
export default class App extends Component {
    render() {
        return (
            <View style={{flex: 1, flexDirection: "column", justifyContent: 'center'}}>
                <MyCustomComponent
                    name={'zhangsan'}
                    age={18}
                />
            </View>
        )
    }
}
//水平居中
export default class App extends Component {
    render() {
        return (
            <View style={{flexDirection: "row", justifyContent: 'center'}}>
                <MyCustomComponent
                    name={'zhangsan'}
                    age={18}
                />
            </View>
        )
    }
}

3. alignItems:在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch。
   实现水平垂直居中：

export default class App extends Component {
    render() {
        return (
            <View style={{flex: 1, flexDirection: "column", justifyContent: 'center', alignItems: 'center'}}>
                <MyCustomComponent
                    name={'zhangsan'}
                    age={18}
                />
            </View>
        )
    }
}