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-startcenter ,效果分别如下所示。

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

......

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

接下来我们分别设置justifyContent为 space-betweenspace-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 布局详解》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

失控

失控

[美]凯文·凯利(Kevin Kelly) / 张行舟 等 / 译言·东西文库/电子工业出版社 / 2016-1 / 89.00元

《失控:全人类的最终命运和结局》(全新修订本)是一部思考人类社会(或更一般意义上的复杂系统)进化的“大部头”著作,对于那些不惧于“头脑体操”的读者来说,必然会开卷有益。 “大众智慧、云计算、物联网、虚拟现实、网络社区、网络经济、协作双赢、电子货币……我们今天所知的,绝大多数是我们二十年前就已知的,并且都在这本书中提及了。”——凯文·凯利 《失控》成书于1994年,2010年中文版首次面......一起来看看 《失控》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具