ReactNative学习----14Flexbox布局的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88632748

文档地址：
https://reactnative.cn/docs/flexbox/#docsNav
效果图：

代码FlexboxDemo1.js：复制即可使用
代码里面有详细的注释：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Alert, Button} from 'react-native';

/**
 *  Flexbox 布局
 *  https://reactnative.cn/docs/flexbox/#docsNav
 *
 */
export default class FlexboxDemo1 extends Component {
    //渲染数据
    render() {
        return (
            <View style={styles.root}>
                <Text style={styles.textStyle}>文字内容1</Text>
                <Text style={styles.textStyle}>文字内容2</Text>
                <Text style={styles.textStyle}>文字内容3</Text>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    //布局样式
    root: {
        height: 200,
        backgroundColor: '#FFFFCC',

        //flexDirection 主轴方向，子元素，是横向排列(row)，还是竖向排列(column)
        //row是横向排列
        flexDirection: 'row',

        //flexWrap 子元素是否换行 换行（wrap），不换行（nowrap），倒序换行（wrap-reverse）
        flexWrap: 'wrap',

        //justifyContent 子元素怎样间隔排列
        //flex-start、center、flex-end、space-around、space-between以及space-evenly
        justifyContent: 'space-evenly',

        // alignItems 次轴(主轴垂直)方向, 子元素的排列方式
        // 例如：
        // flexDirection:'row',主轴是横向排列，次轴就是竖向排列
        // alignItems:'flex-start'竖向最上面，falignItems:'center'竖向居中，alignItems:'flex-end'竖向最下面,
        // alignItems:'stretch'拉伸子元素（注意这时候不要设置子元素高度）
        alignItems: 'center',
    },

    //里面子组件的样式
    textStyle: {
        backgroundColor: '#3399FF',
        fontSize: 15,

        //组件中文字居中，和css中一样
        width: 90,
        lineHeight: 40,
        textAlign: 'center',
    }

});

源码下载：
源码：bkdemo1----FlexboxDemo1.js