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,代码如下所示。

运行效果如下图所示。

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

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

justifyContent

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

  • flex-start(默认值):项目与父容器左端对齐。
  • flex-end:项目与父容器右端对齐。
  • center:居中。
  • space-between: 两端对齐,并且项目间隔相等。
  • space-around:每个项目的两侧间隔相等,因此,项目之间的间隔是项目与父容器边缘间隔的2倍。

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

效果如下所示。

接下来我们分别设置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,代码如下所示。

效果如下图所示。

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

效果如下图所示。

可以看出,当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,代码如下所示。

效果如下所示。

3.Flexbox项目属性

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

flexGrow

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

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

flexShrink

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

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

flexBasis

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

效果如下图所示。

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的取值含义一样。

运行效果如下所示。

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

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

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2017-05-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 19: UGUI ScrollBar

通常在实际项目中,对ScrollBar的应用非常简单,主要用于配合TableView或者ScrollView来进行使用,下一节我们将说明一下Unity里的Scr...

32220
来自专栏用户2442861的专栏

QLineEdit 输入验证(相关的设置)

LineEdit提 供一个文字输入栏位,可以输入文字或数字,我们可以对输入作验证,或是设定为一般显示、密码显示等等,以下的程式是个简单的设定示范:

40520
来自专栏韦弦的偶尔分享

微信小程序分享图片的简易canvas工具类

如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

26620
来自专栏GuZhenYin

C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

前言 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. .NET core2.0 ...

25490
来自专栏欧阳大哥的轮子

MyLayout和XIB或SB的混合使用方法

MyLayout是一个可以非常简单和方便的实现各种界面布局的第三方开源库。在我的github项目中大部分DEMO都是通过代码来实现界面布局的,但这并不是表示My...

8940
来自专栏林德熙的博客

.net Framework 源代码 · ScrollViewer 使用原理其他源代码分析

本文是分析 .net Framework 源代码的系列,主要告诉大家微软做 ScrollViewer 的思路,分析很简单。 看完本文,可以学会如何写一个 Scr...

12010
来自专栏我和未来有约会

CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

19780
来自专栏HTML5学堂

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

72170
来自专栏androidBlog

Android 正 N 边形圆角头像的实现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/de...

16010
来自专栏WindCoder

基于touchSwipe微信手机端微场景HTML5页面特效(适用于PC端)

32810

扫码关注云+社区

领取腾讯云代金券