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

最新推荐文章于 2024-06-26 09:04:57 发布

刘望舒

最新推荐文章于 2024-06-26 09:04:57 发布

阅读量4.2k

点赞数

分类专栏： React Native 文章标签： react-native flexbox flex

本文链接：https://blog.csdn.net/itachi85/article/details/72790457

版权

本文深入探讨了React Native中的Flexbox布局，包括Flexbox容器属性如flexDirection、justifyContent、alignItems等，以及项目属性如flexGrow、flexShrink、flexBasis。通过实例演示了不同属性设置对布局的影响，帮助开发者掌握弹性布局。

摘要由CSDN通过智能技术生成

前言

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

运行效果如下图所示。
QQ图片20170524191908.jpg

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

justifyContent

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

flex-start（默认值）：项目与父容器在主轴的起点方向对齐。（比如flexDirection等于row时，项目与父容器左端对齐）
flex-end：项目与父容器在主轴的终点方向对齐（比如flexDirection等于row时，项目与父容器右端对齐）。
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<