React Native 第三天

7、JustifyContenr

justifyContenr是用来设置主轴内容的排列方式
属性值有:
flex-start:从开始位置排列
flex-end:从结尾位置排列
center: 居中排列
space-between:元素显示在起始和结束的两端
space-around:元素显示在轴起始和结束有一段距离的位置(中间间隔是两边靠边距离的两倍)
justifyContenr是不会改变元素的排列顺序,与FlexDirection中的方向翻转是不同的,FlexDirection的方向翻转会改变元素的排列位置

8、alignItems

alignItems用来设置交叉轴
属性值有:
flex-start:从开始位置排列
flex-end:从结束位置排列
center:居中排列
stretch:拉伸

9、alignSelf

align允许子元素和其他子元素不同,会覆盖alignItems的属性
属性值有:
auto:自动
flex-start:从开始的位置排列
flex-end:从结束的位置排列
center:居中排列
stretch:拉伸
设置在子元素的样式当中

10、左右两栏布局案例

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';export default class Main extends Component {    render() {        return (            <View style={styles.container}>                <View style={styles.left}>                    <Text>{'left'}</Text>                </View>                <View style={styles.right}>                    <Text>{'right'}</Text>                </View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection:'row'    },    left: {        flex: 1,        backgroundColor: 'red'    },    right: {        flex: 1,        backgroundColor: 'green'    }});

实现了屏幕左右各一半的两栏效果