ReactNative探索（四）Flexbox布局详解

相关文章
React Native探索系列

前言

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

1.Flexbox布局概述

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

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

2.Flexbox容器属性

在CSS&＃xff08;React&＃xff09;中容器属性有6种&＃xff0c;而在React Native中容器属性有5种&＃xff0c;它们分别是&＃xff1a;

• flexDirection
• justifyContent
• alignItems
• alignContent
• flexWrap

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

flexDirection

flexDirection属性可以决定主轴的方向&＃xff08;即项目的排列方向&＃xff09;&＃xff0c;它有以下取值&＃xff1a;

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

我们先将flexDirection设置为row&＃xff0c;代码如下所示。

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

运行效果如下图所示。

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

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

justifyContent

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

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

我们将justifyContent设置为flex-end&＃xff0c;代码如下所示。

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

效果如下所示。

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

……

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

……

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

alignItems

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

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

将alignItems设置为flex-end&＃xff0c;代码如下所示。

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

效果如下图所示。

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

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

效果如下图所示。

可以看出&＃xff0c;当alignItems设置为stretch时&＃xff0c;项目会占满整个容器的高度。

alignContent

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

flexWrap

flexWrap用于设置如果一行排不下&＃xff0c;如何换行。它的取值有以下几种&＃xff1a;
- nowrap&＃xff08;默认&＃xff09;&＃xff1a;不换行。
- wrap&＃xff1a;换行&＃xff0c;第一行在上方。

我们将flexWrap设置为wrap&＃xff0c;代码如下所示。

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

效果如下所示。

3.Flexbox项目属性

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

flexGrow

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

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

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

flexShrink

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

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

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

flexBasis

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

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

效果如下图所示。

flex

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

alignSelf

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

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

运行效果如下所示。

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

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

欢迎关注我的微信公众号&＃xff0c;第一时间获得博客更新提醒&＃xff0c;以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码&＃xff0c;即可关注。