React Navtive 的 FlexBox布局

React Native中的FlexBox 和Web CSSS上FlexBox的不同之处

• flexDirection: React Native中默认为flexDirection:'column'，在Web CSS中默认为flex-direction:'row'
• alignItems: React Native中默认为alignItems:'stretch'，在Web CSS中默认align-items:'flex-start'
• flex: 相比Web CSS的flex接受多参数，如:flex: 2 2 10%;，但在 React Native中flex只接受一个参数
• 不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink

RN 中支持的属性

以下属性是React Native所支持的Flex属性

• flexDirection

'row', 'column'（默认）,'row-reverse','column-reverse‘

• flexWrap

'wrap', 'nowrap'（默认）

• justifyContent

'flex-start'（默认）,'flex-end','center', 'space-between', 'space-around'

• alignItems

'flex-start', 'flex-end', 'center', 'stretch'（默认）

主轴和侧轴

• 主轴是水平方向上的轴线，可以理解为横轴

• 侧轴垂直于主轴，可以理解为竖轴

flexDirection

• row: 从左向右依次排列

• row-reverse: 从右向左依次排列

• column: 默认的排列方式，从上向下排列

• column-reverse: 从下向上排列

Usage

/**
 * @author 打碟的DJ
 * @date 2019-07-30
 * @desc
 * @flow
 */

import React, { Component } from 'react';
import { View, Text, SafeAreaView } from 'react-native';

export default class FlexBox extends Component{
    render() {
        return(
            <SafeAreaView>
                <View style={{backgroundColor: 'grey', flexDirection: 'row', marginTop: 100}}>
                    <View style={{width: 40, height: 40, backgroundColor: 'green', justifyContent: 'center', margin:5}}>
                        <Text style={{textAlign: 'center', justifyContent: 'center'}}>1</Text>
                    </View>
                    <View style={{width: 40, height: 40, backgroundColor: 'green', justifyContent: 'center', margin:5}}>
                        <Text style={{textAlign: 'center', justifyContent: 'center'}}>2</Text>
                    </View>
                    <View style={{width: 40, height: 40, backgroundColor: 'green', justifyContent: 'center', margin:5}}>
                        <Text style={{textAlign: 'center', justifyContent: 'center'}}>3</Text>
                    </View>
                    <View style={{width: 40, height: 40, backgroundColor: 'green', justifyContent: 'center', margin:5}}>
                        <Text style={{textAlign: 'center', justifyContent: 'center'}}>4</Text>
                    </View>
                    <View style={{width: 40, height: 40, backgroundColor: 'green', justifyContent: 'center', margin:5}}>
                        <Text style={{textAlign: 'center', justifyContent: 'center'}}>5</Text>
                    </View>
                </View>
            </SafeAreaView>
        );
    }
}

flexWrap

• nowrap flex的元素只排列在一行上，可能导致溢出。

• wrap flex的元素在一行排列不下时，就进行多行排列。

const WIDTH = Dimensions.get('window').width;
<View style={{width: WIDTH, backgroundColor: 'grey', flexDirection: 'row', marginTop: 80, flexWrap:'nowrap'}}>
    ...
</View>
<View style={{width: WIDTH,backgroundColor: 'grey', flexDirection: 'row', marginTop: 80, flexWrap:'wrap'}}>
   ...
</View>

justifyContent

justifyContent 属性定义了容器如何顺着主轴的弹性（flex）元素之间及其周围的控件，默认为 flex-start

• flex-start：从主轴行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐

• flex-end：从主轴行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素与后一个对齐。

• center：从主轴中间位置开始排列。每行一个元素到行首的距离将与每行最后一个元素到行尾的距离相同

• space-between：在主轴上平均分配弹性元素。相邻元素间的距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐

• space-around：在每行上均匀分配弹性元素。相邻元素间的距离相同。每行一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素的一半。
  

  

<View style={{width: WIDTH, backgroundColor: 'grey', flexDirection: 'row', marginTop: 80, justifyContent: 'flex-start'}}>
        ***
</View>

alignItems

alignItems 属性以与 justifyContent 相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。

• flex-start：元素向侧轴起点对齐。
• flex-end：元素向侧轴终点对齐。
• center：元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
• stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

<View style={{width: WIDTH, backgroundColor: 'grey', flexDirection: 'column', margin: 40, alignItems: 'flex-start'}}>
    ***
</View>

子视图属性

alignSelf

'auto', 'flex-start', 'flex-end', 'center', 'stretch'

alignSelf 属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf 属性可重写灵活容器的 alignItems 属性。

• auto(default)：元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
• stretch：元素被拉伸以适应容器。
• center：元素位于容器的中心。
• flex-start：元素位于容器的开头。
• flex-end：元素位于容器的结尾。

<View style={{width: WIDTH, backgroundColor: 'grey', flexDirection: 'column', margin: 40, alignItems: 'center'}}>
    <View style={{width: 80, height: 40, backgroundColor: 'green', justifyContent: 'center', margin:5, alignSelf: 'auto'}}>
        <Text style={{textAlign: 'center', justifyContent: 'center'}}>1</Text>
    </View>
</View>

flex number

flex 属性定义了一个可伸缩元素的能力，根据比例来指定容器大小，默认为0。

<View style={ {width: WIDTH,flexDirection:'row',height:40, backgroundColor:"grey",marginTop:100}}>
    <View style={ {flex:1,backgroundColor:"green",margin:5}}>
        <Text style={ {fontSize:16}}>flex:1</Text>
    </View>
    <View style={ {flex:2,backgroundColor:"green",margin:5}}>
        <Text style={ {fontSize:16}}>flex:2</Text>
    </View>
    <View style={ {flex:3,backgroundColor:"green",margin:5}}>
        <Text style={ {fontSize:16}}>flex:3</Text>
    </View>
</View>