核心内容摘要
“依人大香蕉”：不止于香，更是一种生活态度
项目目录结构与跨平台构建流程详解图1React 项目根目录结构图2执行打包命令 npm run harmony打包过程解析图3正在编辑的 App.tsx 源码关键点图4打包产物生成位置图5鸿蒙工程中的目录映射关系“一一对应”含义图6鸿蒙侧代码 —— 仅作为“架子”核心说明
总结完整工作流在 React Native for OpenHarmonyRN4OH开发模式中开发者使用熟悉的 React 语法编写 UI 逻辑再通过专用工具将其打包为 OpenHarmony 可识别的 JavaScript Bundle最终由鸿蒙原生应用加载运行。
本文将结合6 张真实项目截图逐步拆解这一“前端写代码 → 鸿蒙跑应用”的完整链路。
图1React 项目根目录结构这是典型的 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}fromrnqh/react-native-openharmony;EntryComponentstruct Index{StorageLink(RNOHCoreContext)privaternohCoreContext:RNOHCoreContext|undefinedundefined}核心说明无任何 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