当前位置：首页 > news >正文

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

news 2026/3/27 0:15:53

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

- 图1：React 项目根目录结构
- 图2：执行打包命令 `npm run harmony`
- - 打包过程解析：
- 图3：正在编辑的 `App.tsx` 源码
- - 关键点：
- 图4：打包产物生成位置
- 图5：鸿蒙工程中的目录映射关系
- - “一一对应”含义：
- 图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`

在项目根目录下执行：

npmrun harmony

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

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

打包过程解析：

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

⚠️ 注意：必须在项目根目录执行，否则无法找到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@Componentstruct Index{@StorageLink('RNOHCoreContext')privaternohCoreContext:RNOHCoreContext|undefined=undefined}