React Native跨平台鸿蒙开发实战系列(二十)：如何使用flex布局方案(与web方式不同)

Flexbox是Web开发中强大的布局工具，通过设置容器的display属性为flex即可启用弹性布局。它支持灵活调整子元素排列方向（flex-direction）、对齐方式（justify-content/align-items）和空间分配（flex属性）。示例展示了如何创建等宽子元素并实现居中布局。实际案例中，在React Native中使用flexDirection:'row'可实现水平排列

wanmeijuhao

954人浏览 · 2025-11-27 14:15:29

wanmeijuhao · 2025-11-27 14:15:29 发布

在Web开发中，使用Flexbox（弹性盒布局）是一种非常灵活且强大的方式来创建布局。Flexbox允许你设计响应式和动态的布局，无论是简单的还是复杂的。下面是如何使用Flexbox的一些基本步骤和示例。

在Web开发中，使用Flexbox（弹性盒布局）是一种非常灵活且强大的方式来创建布局。Flexbox允许你设计响应式和动态的布局，无论是简单的还是复杂的。下面是如何使用Flexbox的一些基本步骤和示例。

1. 基本概念

Flexbox 是一个一维布局模型，它可以让你在容器内沿着主轴（main axis）或交叉轴（cross axis）排列子元素。Flex 是 Flexible Box 的缩写，意为"弹性布局"

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

在容器中子元素自动成为容器成员，被称之为 flex item，简称"项目"。每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

主轴（Main Axis）：默认情况下是水平方向，但可以通过 flex-direction 属性改变为垂直方向。
交叉轴（Cross Axis）：与主轴相对应的另一轴。

在这里插入图片描述

2. 使用Flexbox

2.1 创建Flex容器

要使用Flexbox，首先需要将一个容器的 display 属性设置为 flex 或 inline-flex。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.flex-container {
  display: flex; /* 或 inline-flex */
}

2.2 调整子元素排列方向

使用 flex-direction 属性来定义主轴的方向。

.flex-container {
  display: flex;
  flex-direction: row; /* 默认值，水平排列 */
  /* flex-direction: column; /* 垂直排列 */
}

2.3 控制子元素的对齐方式

主轴对齐：使用 justify-content。
交叉轴对齐：使用 align-items。

.flex-container {
  display: flex;
  justify-content: center; /* 子元素在主轴上居中 */
  align-items: center; /* 子元素在交叉轴上居中 */
}

2.4 分配空间和增长因子

使用 flex 属性来控制子元素如何分配空间和增长。

.flex-item {
  flex: 1; /* 默认值是 0 1 auto */
}

这里，flex 属性是 flex-grow, flex-shrink, 和 flex-basis 的简写。例如，flex: 1 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
  .flex-container {
    display: flex;
    justify-content: space-around; /* 子元素在主轴上平均分布 */
    align-items: center; /* 子元素在交叉轴上居中 */
    height: 200px; /* 设置容器高度以便看到效果 */
    border: 1px solid ccc; /* 容器边框以便观察 */
  }
  .flex-item {
    background-color: cornflowerblue;
    padding: 20px;
    color: white;
    text-align: center;
    font-size: 20px;
    flex: 1; /* 让子元素等宽 */
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
</body>
</html>

这个示例创建了一个具有三个等宽子元素的Flex容器，子元素在主轴上平均分布，并在交叉轴上居中。通过调整CSS，你可以轻松地实现各种复杂的布局需求。

实际案例：

传统的页面布局，基于盒子模型margin + border + padding + content，依赖 display + position + float。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。按照我们以往的布局方案，我们采用flex的布局方案来使用一下。


import React from 'react';
import { View, Text, Dimensions, StyleSheet, Image } from 'react-native';
 
//获取屏幕的宽高
const screenWidth =Math.round( Dimensions.get('window').width);
const screenHight =Math.round( Dimensions.get('window').height);

const AppStyles = StyleSheet.create({
  wrap: {
    width: '100%',
    height: screenHight,
    backgroundColor: '#85BDFF'
  },
  title: {
    width: '100%',
    height: 72,
    fontFamily: 'OPPOSans, OPPOSans',
    fontWeight: 'normal',
    paddingTop: 50,
    fontSize: 36,
    color: '#304057',
    lineHeight: 72,
    textAlign: 'center',
    fontStyle: 'normal'
  },
  banner: {
    paddingTop: 50,
    paddingRight: 64,
    paddingLeft: 64,
  },
  bannerItem: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '50%',
  }
})
function App() {
  return (
    <View style={AppStyles.wrap}>
      <Text style={AppStyles.title}>鸿蒙ReactNative系统</Text>
      <View style={AppStyles.banner}>
        <View style={{display:'flex',flexDirection:'row',justifyContent:'space-between'}}>
          <View style={AppStyles.bannerItem}>
            <Image style={{width:27,height:27}} source={require('./images/checked.png')}></Image>
            <Text>实时业绩便捷查询</Text>
          </View>
          <View style={AppStyles.bannerItem}>
            <Image style={{width:27,height:27}} source={require('./images/checked.png')}></Image>
            <Text>订单状态轻松把控</Text>
          </View>
        </View>
        <View style={{display:'flex',flexDirection:'row',justifyContent:'space-between'}}>
          <View style={AppStyles.bannerItem}>
            <Image style={{width:27,height:27}} source={require('./images/checked.png')}></Image>
            <Text>宣传数据全程管理</Text>
          </View>
          <View style={AppStyles.bannerItem}>
            <Image style={{width:27,height:27}} source={require('./images/checked.png')}></Image>
            <Text>海量素材一站转发</Text>
          </View>
        </View>
      </View>
    </View>
  );
}
 
export default App;

在这里插入图片描述

可以看到实际的效果，并没有左右对齐，我怀疑是这个属性flexDirection:'row’可能会有效果。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

Flutter与鸿蒙深度融合：打造物理引擎驱动的3D卡片交互体验

HarmonyOS开发者社区

Flutter audioplayers 库鸿蒙平台适配实战：从原理到优化

本文详细介绍了将 Flutter插件适配到鸿蒙平台的完整方案。我们选择了基于这条标准路径，实现了从 Dart API 到鸿蒙AVPlayer的完整调用链，并提供了包含健壮错误处理、生命周期管理的可运行代码。这个方案的优势在于架构清晰，与现有 Flutter 插件生态兼容性好，是大多数跨平台迁移项目的稳妥选择。适配方法小结理解插件分层：吃透插件 Dart 层、平台接口层、原生层各自的职责。选择通信策