React Native 探索（四）Flexbox 布局详解

栏目: CSS · 发布时间: 6年前

内容简介：React Native 探索（四）Flexbox 布局详解

前言

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

运行效果如下图所示。

可以看出项目（子组件）是水平排列的，并且起点在左端。关于例子中的颜色设定可以查看官网文档。我们也可以将flexDirection设置为 row-reverse ，来查看效果：

可以看出Flex项目同样是水平排列的，只是起点在右端。

justifyContent

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

flex-start（默认值）：项目与父容器左端对齐。
flex-end：项目与父容器右端对齐。
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);

效果如下所示。

接下来我们分别设置justifyContent为 flex-start 和 center ，效果分别如下所示。

......

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

......

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

alignItems

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

flex-start：项目与父容器的顶部对齐。
flex-end：项目与父容器的底部对齐。
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);

效果如下图所示。

看到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);

效果如下图所示。

可以看出，当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);

效果如下所示。

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，这样第二个项目所占的剩余空间是其他项目的两倍。如下图所示。

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，这样当空间不足时，第二个项目不会缩小，如下图所示。

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

效果如下图所示。

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

运行效果如下所示。

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

参考资料

官方文档

Flex 布局教程：语法篇---阮一峰

React-Native之flexbox布局篇

欢迎关注我的微信公众号，第一时间获得博客更新提醒，以及更多 成体系 的Android相关原创技术干货。

扫一扫下方二维码或者长按识别二维码，即可关注。

以上所述就是小编给大家介绍的《React Native 探索（四）Flexbox 布局详解》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Mastering Bitcoin

Andreas M. Antonopoulos / O'Reilly Media / 2014-12-20 / USD 34.99

Mastering Bitcoin tells you everything you need to know about joining one of the most exciting revolutions since the invention of the web: digital money. Bitcoin is the first successful digital curren......一起来看看《Mastering Bitcoin》这本书的介绍吧!

码农工具

React Native 探索（四）Flexbox 布局详解

前言

1.Flexbox布局概述

2.Flexbox容器属性

flexDirection

justifyContent

alignItems

alignContent

flexWrap

3.Flexbox项目属性

flexGrow

flexShrink

flexBasis

flex

alignSelf

Mastering Bitcoin

CSS 压缩/解压工具

Markdown 在线编辑器

HEX HSV 转换工具