项目目录结构与跨平台构建流程详解
- 图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}核心说明：
- 无任何 UI 逻辑：不绘制按钮、文本或布局
- 仅初始化 RN 运行时：通过
RNOHCoreContext加载bundle.harmony.js - 提供能力桥接：后续可注册相机、网络等原生模块
🧱 因此称其为“架子”——它只是 React 应用的运行容器，而非功能实现者。
总结：完整工作流
- 写代码：在
App.tsx中开发 React 组件 - 打包：执行
npm run harmony生成bundle.harmony.js - 输出：文件自动写入
harmony/entry/.../rawfile/ - 集成：该目录即为鸿蒙工程的一部分
- 运行：鸿蒙 App 启动时加载 JS Bundle 并渲染 UI
这种架构实现了“前端专注逻辑，鸿蒙专注运行”的职责分离，是 RN4OH 跨平台能力的核心所在。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
