React Native学习—— 使用Flexbox布局

Posted 2020-10-30 麦豇豆

本文基于React Native 0.52

Demo上传到Git了，有需要可以看看，写了新内容会上传的。Git地址 https://github.com/gingerJY/React-Native-Demo

一、主轴方向 flexDirection

　　flexDirection决定主轴的排列方向。

　　1、column——竖直（默认）

　　

2、row——水平

　

 二、主轴排列方式 justifyContent　

　　justifyContent决定其子元素沿着主轴的排列方式。（以下例子主轴方向为row）

　　1、flex-start——子元素靠近主轴起始端

　　　　

　　2、flex-end——子元素靠近主轴末尾端

　　　　

　　3、center——主轴居中

　　　　

　　4、space-around 和 space-between 都是均匀分布，区别如下图

　　　　　　

 三、次轴排列方式 alignItems

　　alignItems决定其子元素沿着次轴的排列方式。（以下例子主轴方向为row，次轴方向为column）

　　1、flex-start——子元素靠近次轴起始端

　　　　

2、flex-end——子元素靠近次轴末尾端

　　　　

3、center——子元素次轴居中 

　　　　

4、stretch——子元素撑开、填满次轴（子元素在次轴不能有固定尺寸）

　　　　

四、示例代码

可以自己试着改变看看，需要注意的是alignItems设为stretch时，要把子元素的次轴尺寸去掉（例如主轴方向为row，则去掉height）。

import React, { Component } from \'react\';
import {
    StyleSheet,
    View,
    Text,
    Dimensions,
} from \'react-native\';

// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get(\'window\');

export default class category extends Component {

    render() {
        return (
            <View style={styles.container}> 
                <Text>category</Text>
                <View style={styles.flexBox}>  
                    <View style={{width: 80, height:80, backgroundColor: \'powderblue\'}} />
                    <View style={{width: 80, height:80, backgroundColor: \'skyblue\'}} />
                    <View style={{width: 80, height:80, backgroundColor: \'steelblue\'}} /> 
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: \'center\',
    },
    flexBox:{
        width:width,
        height:280,
        borderWidth:1,

        flexDirection:\'row\',//主轴方向 
        justifyContent:\'space-between\', //flex-start,flex-end,center,space-between,space-around
        alignItems:\'center\',//flex-start,flex-end,center,stretch
    }
});

　　

 

END-------------------------------------------------------