react native 的 flexDirection justifyContect alignItems关系

我建议大家用webStorm进行react native 的开发，我被vscode弄疯了，单独运行react native 都没有问题，但是一旦使用vscode进行reactnative的开发，就会报各种问题，有时候根本启动不起来，但是使用react-native run-android就一点儿都没有问题

使用webstrom可以进行断点调试 只需要在调试配置中的浏览器项中（chrome）的command lines中配置它即可  -headless --disable-gpu

1. 说下react native 的justifyContent，这个就是用来在纵向上布局，当值为center的时候，就是垂直居中，flex-start 就是顶部对齐  flex-end就是底部对齐(flexDirection:’column’)
2. alignItems，怎么说呢，就是横向布局，当值为center的时候，就是垂直居中，flex-start 就是左对齐  flex-end就是右对齐（flexDirection:’row’）
3. 估计蒙了，我也是弄了一下午才明白过来，首先做对齐方式的时候，必须指定flexDirction的对齐方式，它只有2中，row和column,react-native默认的对齐方式是column，即纵向对齐，也就是Y轴方向（作为主轴，网上好多都是指x轴是主轴(main cross)，Y轴是侧轴（cross axis）,但是这个指的是flexDirection:’row’但是如果是flexDirection:’column’，那y轴就是主轴，x轴就是侧轴了），因此当flexDirction:’column’的时候，justifyContent:”flex-start”就是顶部对齐，center的时候就是垂直居中对齐，flex-end的时候就是垂直底部对齐

当flexDirction:’row’的时候，flex-start:左部对齐，center的时候就是水平居中对齐，flex-end的时候就是右对齐了。

同理alignItems也是依据flexDirction来决定的，如果是column那么就是决定水平的显示，如果是row那就是是显示垂直方向的显示，就是与justifyContext相反。alignItems: 'stretch',是完全占满父控件的空间的意思,stretch是延展的英文

1. 明白了这个，就对下面的styles.container,就能知道为什么所有的内容显示到app的中间了，
2. 同理明白styles.rowViewStyle为什么占满整个1行，2个text为什么居中对齐了，至于第二个text为什么占满了剩余的空间，那是因为它写了flex:1,而前面没有写,通过这个我们明白了一般情况下写的样式是针对，其下面控件的配置，但是flex是针对本身控件的设置，flex:1指的是弹性空间为1（也是依据flexDirction来分配的）

export default class N3 extends Component{

 

    render(){

        return(

            <View style={styles.container}>

                <Text style={styles.welcome}>

                    Welcome to React Native!first

                </Text>

                <Text style={styles.instructions}>

                    To get started, edit App.js

                </Text>

                <Text style={styles.testRowStyle}>

                   cccc

                </Text>

                <View style={styles.rowViewStyle}>

                    <Text style={styles.titleStyle}>

                        new title11

                    </Text>

                    <Text style={styles.titleRightStyle}>

                        new bbbbd

                    </Text>

                </View>

            </View>

        );

    }

}

 

const styles = StyleSheet.create({

    container: {

        flex: 1,

        flexDirection:'column', //列项

        justifyContent: 'center', //垂直居中

        alignItems: 'stretch',

        backgroundColor: '#F5FCFF',

    },

    welcome: {

        fontSize: 20,

        textAlign: 'center',

        // margin: 10,

        backgroundColor:'blue'

    },

    instructions: {

        textAlign: 'center',

        color: '#333333',

        marginBottom: 5,

        backgroundColor:'yellow'

    },

    titleStyle:{

        backgroundColor: '#ff2020',

        color: 'white',

        fontSize: 16

    },

    rowViewStyle:{

        flexDirection: 'row',

        backgroundColor:'#ffaaaa',

        height: 100,

        justifyContent: 'flex-start',

        alignItems:'center',

        // alignItems:'flex-start',

    },

    testRowStyle:{

        height:50,

        backgroundColor:'orange',

        textAlign:'center'

    },

    titleRightStyle:{

        textAlign: 'center',

        color: '#333333',

        marginBottom: 5,

        backgroundColor:'yellow',

        flex:1

    }

});