React Native学习(九)—— 使用Flexbox布局

本文基于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-------------------------------------------------------

  

 

posted @ 2018-04-09 13:19  麦豇豆  阅读(...)  评论(...编辑  收藏