React Native for OpenHarmony：项目目录结构与跨平台构建流程详解

项目目录结构与跨平台构建流程详解

• • [图1：React 项目根目录结构](#图1：React 项目根目录结构)
  • [图2：执行打包命令 `npm run harmony`](#图2：执行打包命令 npm run harmony)
  • • 打包过程解析：
  • [图3：正在编辑的 `App.tsx` 源码](#图3：正在编辑的 App.tsx 源码)
  • • 关键点：
  • 图4：打包产物生成位置
  • 图5：鸿蒙工程中的目录映射关系
  • • "一一对应"含义：
  • [图6：鸿蒙侧代码 ------ 仅作为"架子"](#图6：鸿蒙侧代码 —— 仅作为“架子”)
  • • 核心说明：
  • 总结：完整工作流

在 React Native for OpenHarmony（RN4OH）开发模式中，开发者使用熟悉的 React 语法编写 UI 逻辑，再通过专用工具将其打包为 OpenHarmony 可识别的 JavaScript Bundle，最终由鸿蒙原生应用加载运行。本文将结合 6 张真实项目截图，逐步拆解这一"前端写代码 → 鸿蒙跑应用"的完整链路。

---

图1：React 项目根目录结构

这是典型的 React Native 项目根目录。关键特征包括：

• App.tsx：主入口组件文件，所有页面逻辑在此定义。
• package.json ：包含项目依赖与脚本命令，其中 scripts.harmony 是核心。
• harmony/ 目录 ：非标准 RN 目录，是为 OpenHarmony 平台预留的输出目标路径（通常由脚手架生成）。
• 无 Android/iOS 文件夹：表明该项目专为 OpenHarmony 构建，不兼容传统移动端。

✅ 开发者在此目录下完成全部业务开发，无需接触 ArkTS 或 DevEco Studio。

---

图2：执行打包命令 npm run harmony

在项目根目录下执行：

npm run harmony

该命令会触发 package.json 中定义的脚本：

{
  "scripts": {
    "harmony": "react-native bundle-harmony --dev"
  }
}

打包过程解析：

1. 启动 RN4OH 定制打包器 （bundle-harmony）
2. 读取 App.tsx 及其依赖
3. 编译 JSX/TSX 为纯 JavaScript
4. 内联小型资源，外置大文件至 assets/
5. 输出产物到预设路径

⚠️ 注意：必须在项目根目录 执行，否则无法找到 App.tsx 入口。

---

图3：正在编辑的 App.tsx 源码

开发者在此文件中编写 React 组件代码，例如：

function App() {
  return (
    <View>
      <Text>欢迎 VON</Text>
      <Text>使用 React Native for OpenHarmony</Text>
    </View>
  );
}

关键点：

• 使用 View、Text 等组件，来自 @ohos/react-native
• 所有样式、事件、状态管理均采用标准 React 方式
• 每次修改后必须重新执行 npm run harmony 才能生效（图中红框提示）

💡 此文件是唯一需要开发者关注的业务代码入口。

---

图4：打包产物生成位置

打包成功后，终端显示：

[CREATED] ./harmony/entry/src/main/resources/rawfile/bundle.harmony.js
info Copied 6 assets

产物路径为：

./harmony/entry/src/main/resources/rawfile/
├── bundle.harmony.js   ← 主 JS Bundle
└── assets/             ← 静态资源（图片等）

✅ 这正是 OpenHarmony 应用读取 JS 代码的标准位置（rawfile 目录）。

---

图5：鸿蒙工程中的目录映射关系

如图所示，harmony/ 目录结构与标准 OpenHarmony 工程完全一致：

harmony/
└── entry/
    └── src/
        └── main/
            ├── resources/
            │   └── rawfile/          ← 接收 bundle.harmony.js
            └── ets/                  ← 原生代码（仅框架）

"一一对应"含义：

• React 打包输出的 harmony/.../rawfile/
  ⇩
• 鸿蒙工程的 entry/src/main/resources/rawfile/

🔗 这种设计使得 JS Bundle 可被鸿蒙应用直接访问，无需额外配置。

---

图6：鸿蒙侧代码 ------ 仅作为"架子"

打开 entry/src/main/ets/Index.ets，可见：

import { RNAPP, RNOHCoreContext } from '@rnqh/react-native-openharmony';

@Entry
@Component
struct Index {
  @StorageLink('RNOHCoreContext') private rnohCoreContext: RNOHCoreContext | undefined = undefined
}

核心说明：

• 无任何 UI 逻辑：不绘制按钮、文本或布局
• 仅初始化 RN 运行时 ：通过 RNOHCoreContext 加载 bundle.harmony.js
• 提供能力桥接：后续可注册相机、网络等原生模块

🧱 因此称其为"架子"------它只是 React 应用的运行容器，而非功能实现者。

---

总结：完整工作流

1. 写代码 ：在 App.tsx 中开发 React 组件
2. 打包 ：执行 npm run harmony 生成 bundle.harmony.js
3. 输出 ：文件自动写入 harmony/entry/.../rawfile/
4. 集成：该目录即为鸿蒙工程的一部分
5. 运行：鸿蒙 App 启动时加载 JS Bundle 并渲染 UI

这种架构实现了 "前端专注逻辑，鸿蒙专注运行" 的职责分离，是 RN4OH 跨平台能力的核心所在。

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net