React Native探索(四)Flexbox布局详解

5e634bec-0eac-42de-9f5a-28813cf0ff28_副本.png

相关文章
React Native探索系列

前言

在Android开发中我们有很多种布局,比如LinearLayout和RelativeLayout,同样在React Native也有它的布局,这个布局就是Flexbox布局。在CSS、React Native和Android等都有它的身影。这一篇文章,我们就通过各种小例子来掌握React Native中的Flexbox布局。

1.Flexbox布局概述

Flexbox译为弹性布局(这里我们简称Flex),是CSS的一种布局方案,可以简单、完整、响应式的实现各种页面布局。不只是在CSS中应用,在React Native也使用了Flex,基本和CSS中的Flex类似。甚至在Android开发中我们也会用到Flex,谷歌提供了基于Flex的FlexboxLayout,以便于处理复杂的布局,因此,学习Flex布局对于Android开发也是有帮助的。
采用Flex布局的元素,称为Flex容器(flex container),简称容器,它的所有子元素则是Flex容器的成员称为Flex项目(flex item),简称项目。如下图所示。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做main start,结束位置叫做main end。相似的,交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列,它在主轴上的长度叫做main size,交叉轴上的长度叫做cross size。

2.Flexbox容器属性

在CSS(React)中容器属性有6种,而在React Native中容器属性有5种,它们分别是:

  • flexDirection
  • justifyContent
  • alignItems
  • alignContent
  • flexWrap

下面通过小例子来分别介绍这些Flexbox容器属性。

flexDirection

flexDirection属性可以决定主轴的方向(即项目的排列方向),它有以下取值:

  • column(默认值):主轴为垂直方向,起点在顶端。
  • row:主轴为水平方向,起点在左端。
  • column-reverse:主轴为垂直方向,起点在下端。
  • row-reverse:主轴为水平方向,起点在右端。

我们先将flexDirection设置为row,代码如下所示。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{flex: 1, flexDirection: 'row', backgroundColor: 'ivory'}}>
                <View style={{width: 60, height: 60, backgroundColor: 'powderblue'}}/>
                <View style={{width: 60, height: 60, backgroundColor: 'skyblue'}}/>
                <View style={{width: 60, height: 60, backgroundColor: 'dodgerblue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

运行效果如下图所示。
QQ图片20170524191908.jpg

可以看出项目(子组件)是水平排列的,并且起点在左端。关于例子中的颜色设定可以查看官网文档。我们也可以将flexDirection设置为row-reverse,来查看效果:
QQ图片20170524200617.jpg
可以看出Flex项目同样是水平排列的,只是起点在右端。

justifyContent

justifyContent属性用于定义项目在主轴上的对齐方式。它的取值有以下几种:

  • flex-start(默认值):项目与父容器在主轴的起点方向对齐。(比如flexDirection等于row时,项目与父容器左端对齐)
  • flex-end:项目与父容器在主轴的终点方向对齐(比如flexDirection等于row时,项目与父容器右端对齐)。
  • center:居中。
  • space-between: 两端对齐,并且项目间隔相等。
  • space-around:每个项目的两侧间隔相等,因此,项目之间的间隔是项目与父容器边缘间隔的2倍。

我们将justifyContent设置为flex-end,代码如下所示。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end', 
            backgroundColor: 'ivory'}}>
                <View style={{width: 60, height: 60, backgroundColor: 'powderblue'}}/>
                <View style={{width: 60, height: 60, backgroundColor: 'skyblue'}}/>
                <View style={{width: 60, height: 60, backgroundColor: 'dodgerblue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

效果如下所示。
QQ图片20170524215354.jpg

接下来我们分别设置justifyContent为flex-startcenter,效果分别如下所示。

QQ图片20170524220218.jpg …… QQ图片20170524220103.jpg

接下来我们分别设置justifyContent为space-betweenspace-around来查看它们有什么区别,效果分别如下所示。

QQ图片20170524220851.jpg …… QQ图片20170524221540.jpg

上面左图是设置了space-between,可以看出最左边和最右边的项目都和父容器没有间隔,并且项目之间的间隔是相等的。右图的是space-around,最左边和最右边的项目都和父容器有间隔,并且项目之间的间隔是项目与父容器的间隔的2倍。

alignItems

alignItems用于定义项目在交叉轴上的对齐方式。它的取值有以下几种:

  • flex-start:项目与父容器在交叉轴的起点方向对齐。(比如flexDirection等于row时,项目与父容器上端对齐)
  • flex-end:项目与父容器在交叉轴的终点方向对齐。(比如flexDirection等于row时,项目与父容器下端对齐)
  • center:居中。
  • baseline :项目的第一行文字的基线对齐。
  • stretch:(默认值)如果项目未设置高度或者高度设为auto,项目将占满整个容器的高度,否则该取值不会生效。

将alignItems设置为flex-end,代码如下所示。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'flex-end',
                backgroundColor: 'ivory'
            }}>
                <View style={{width: 60, height: 60, backgroundColor: 'powderblue'}}/>
                <View style={{width: 60, height: 60, backgroundColor: 'skyblue'}}/>
                <View style={{width: 60, height: 60, backgroundColor: 'dodgerblue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

效果如下图所示。
QQ图片20170525125023_副本.jpg

看到flex-end的效果,flex-start和center的效果也很容易知道。我们接下来将alignItems设置为stretch,需要注意的是,当项目没有设置高度或者高度设为auto时,stretch才会生效。这里为了验证效果,将所有项目的高度设置为auto。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'stretch',
                backgroundColor: 'ivory'
            }}>
                <View style={{width: 60, height: 'auto', backgroundColor: 'powderblue'}}/>
                <View style={{width: 60, height: 'auto', backgroundColor: 'skyblue'}}/>
                <View style={{width: 60, height: 'auto', backgroundColor: 'dodgerblue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

效果如下图所示。
QQ图片20170525131620_副本.jpg
可以看出,当alignItems设置为stretch时,项目会占满整个容器的高度。

alignContent

alignContent用于多行项目在交叉轴上的对齐方式。如果项目只有一行,该属性是不起作用的。它的取值有 flex-start 、flex-end 、 center 、space-between 、 space-around 和 stretch,只比justifyContent的取值多了一个stretch(默认值,含义和alignItems的stretch类似),alignContent的取值的含义和justifyContent的取值的含义类似,这里就不做举例了。

flexWrap

flexWrap用于设置如果一行排不下,如何换行。它的取值有以下几种:

  • nowrap(默认):不换行。
  • wrap:换行,第一行在上方。

我们将flexWrap设置为wrap,代码如下所示。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                alignItems: 'flex-start',
                flexWrap: 'wrap',
                backgroundColor: 'ivory'
            }}>
                <View style={{width: 100, height: 60, backgroundColor: 'powderblue'}}/>
                <View style={{width: 100, height: 60, backgroundColor: 'skyblue'}}/>
                <View style={{width: 100, height: 60, backgroundColor: 'dodgerblue'}}/>
                <View style={{width: 100, height: 60, backgroundColor: 'blue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

效果如下所示。

QQ图片20170525141454.jpg

3.Flexbox项目属性

在React Native中项目属性有很多中,具体的可以参考:Layout Props。这里介绍flexGrow、flexShrink、flexBasis、flex和alignSelf。

flexGrow

flexGrow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                alignItems: 'flex-start',
                backgroundColor: 'ivory'
            }}>
                <View style={{width: 50, height: 50, flexGrow: 1, backgroundColor: 'powderblue'}}/>
                <View style={{width: 50, height: 50, flexGrow: 2, backgroundColor: 'skyblue'}}/>
                <View style={{width: 50, height: 50, flexGrow: 1, backgroundColor: 'dodgerblue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

我们将第二个项目flexGrow设置为2,其他的项目flexGrow设置为1,这样第二个项目所占的剩余空间是其他项目的两倍。如下图所示。
QQ图片20170525150041.jpg

flexShrink

flexShrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                alignItems: 'flex-start',
                backgroundColor: 'ivory'
            }}>
                <View style={{width: 120, height: 50, flexShrink: 1, backgroundColor: 'powderblue'}}/>
                <View style={{width: 120, height: 50, flexShrink: 0, backgroundColor: 'skyblue'}}/>
                <View style={{width: 120, height: 50, flexShrink: 1, backgroundColor: 'dodgerblue'}}/>
                <View style={{width: 120, height: 50, flexShrink: 1, backgroundColor: 'blue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

我们将第二个项目的flexShrink设置为0,其他的项目都为1,这样当空间不足时,第二个项目不会缩小,如下图所示。

QQ图片20170525151535.jpg

flexBasis

flexBasis属性定义了项目的初始宽度。它的默认值为auto,即项目的本来的宽度。我们知道width也可以用来设置项目的宽度,如果项目同时设置了width和flexBasis,那么flexBasis会覆盖width的值。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                alignItems: 'flex-start',
                backgroundColor: 'ivory'
            }}>
                <View style={{width: 120, height: 50, flexBasis: 60, backgroundColor: 'powderblue'}}/>
                <View style={{width: 120, height: 50, backgroundColor: 'skyblue'}}/>
                <View style={{width: 120, height: 50, backgroundColor: 'dodgerblue'}}/>
                <View style={{width: 120, height: 50, backgroundColor: 'blue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

效果如下图所示。

QQ图片20170525164514.jpg

flex

如果我们每次都要设定flex-grow、flex-shrink和 flex-basis属性,显然有些麻烦,这时我们可以用flex 属性,它是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性,默认值为0 1 auto,其中后两个属性可选。关于flex这里就不做举例了。

alignSelf

alignSelf属性和alignItems属性类似,只不过alignSelf作用于项目,它允许单个项目有与其他项目不一样的对齐方式,并且覆盖alignItems属性。alignSelf默认值为为auto,表示继承父元素的alignItems属性,如果没有父元素,则等同于stretch。alignSelf有五种取值:auto、flex-start、flex-end、center、baseline和stretch,除了多了auto,其他的取值都和alignItems的取值含义一样。

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
class FlexDirection extends Component {
    render() {
        return (
            <View style={{
                flex: 1,
                flexDirection: 'row',
                alignItems: 'flex-start',
                backgroundColor: 'ivory'
            }}>
                <View style={{width: 60, height: 60, alignSelf: 'flex-end', backgroundColor: 'powderblue'}}/>
                <View style={{width: 60, height: 60, alignSelf: 'center', backgroundColor: 'skyblue'}}/>
                <View style={{width: 60, height: 'auto', alignSelf: 'stretch', backgroundColor: 'dodgerblue'}}/>
                <View style={{width: 60, height: 60, alignSelf: 'auto', backgroundColor: 'blue'}}/>
            </View>
        );
    }
}
AppRegistry.registerComponent('AwesomeProject', () => FlexDirection);

运行效果如下所示。
QQ图片20170526192438_副本.jpg

好了,关于Flexbox布局就讲到这,还有很多属性这里没有提到,比如:margin、padding、marginRight和maxWidth等等,这些属性我们一看名字就知道它的作用(Android开发者角度),因此这里就不多介绍了,更多的属性请查阅官方文档。

参考资料
官方文档
Flex 布局教程:语法篇—阮一峰
React-Native之flexbox布局篇

友情链接:万达直属  万达娱乐主管QQ  万达主管QQ  万达主管QQ  万达娱乐主管QQ  测试  万达娱乐登录  guoqibee.com  万达娱乐主管  万达注册