React Native学习（九）—— 使用Flexbox布局

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 } });