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），简称项目。如下图所示。

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

容器默认存在两根轴：水平的主轴（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);

运行效果如下图所示。

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

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

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

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

效果如下所示。

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

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

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

......

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

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

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

......

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

上面左图是设置了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);

效果如下图所示。

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

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

效果如下图所示。

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

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

效果如下所示。

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

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

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

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

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

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

效果如下图所示。

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

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

运行效果如下所示。

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

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

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

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍
Learning PHP & MySQL中文版

Learning PHP & MySQL中文版

车立红 / 中国电力出版社 / 2007-06 / 36.00元

《Learning PHP & MySQL中文版》将介绍程序、模板和数据库的工作原理，讲述如何应对其中的挑战，并彻底地探索这些技术。一起来看看 《Learning PHP & MySQL中文版》 这本书的介绍吧!

码农工具
图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3