学习文档

Windows 11 OpenHarmony版React Native开发环境搭建完整指南_已更新 浏览器输入 ssf88.lol 即可正常-CSDN博客

必备工具

提前安装以下工具，版本按上面要求来，避免兼容问题：

VS Code：写RN代码、跑终端命令

DevEco Studio：创建鸿蒙工程、编译运行鸿蒙应用

ohpm：鸿蒙包管理工具，随DevEco Studio安装，配置环境变量

搭建流程

1. 基础环境准备（VS Code或文件终端操作）

1. 安装Node.js和JDK，配置好环境变量，终端执行命令验证版本，无报错即，随即执行缓存清理命令

      2.npm换国内镜像（加速）：npm config set registry https://registry.npm.taobao.org

2. 创建并运行RN项目（VS Code或文件终端操作）

1. 创建RN项目：在AtomGitNews目录下右键以终端打开，执行npx react-native@0.72.5 init AtomGitNews --version 0.72.5，用VS Code打开项目。
2. 安装鸿蒙化依赖包：进入项目目录，执行npm i @react-native-oh/react-native-harmony@0.72.90
3. 生成bundle文件：npm run harmony，文件位置：AtomGitNews/harmony/entry/src/main/resources/rawfile/bundle.harmony.js - JavaScript bundle 文件
   AtomGitNews/harmony/entry/src/main/resources/rawfile/assets/ - 图片资源文件夹

3. 鸿蒙工程创建与集成（DevEco Studio+VS Code）

1. 用DevEco Studio创建鸿蒙空工程
2. 在 DevEco Studio 中，右键点击 entry 目录，选择 “Open In > Terminal” 在底部控制台打开命令提示符，执行ohpm i @rnoh/react-native-openharmony@0.72.90，生成oh_modules 文件夹

  3.安装鸿蒙端RNOH依赖：打开工程entry模块的oh-package.json5，添加"@rnoh/react-native-   openharmony": "0.72.90"，点击Sync Now同步。

  4.补充 CPP 侧代码

  创建CMakeLists.txt文件，并将 RNOH 的适配层代码添加到编译构建中生成 librnoh_app.so：

”创建PackageProvider.cpp，PackageProvider.cpp代码编写完成：

  5.补充ArkTS侧的代码

EntryAbility.ets中原有的UIAbility替换为react-native-openharmony依赖包提供的RNAbility，并重写getPagePath返回，使其返回程序的入口page:

打开Index.ets添加RNOH的使用代码：

4.启动鸿蒙模拟器，点击Run运行项目，成功后模拟器显示RN页面。

常见问题及解决

• 提示“Missing script: harmony”：检查package.json是否添加脚本，保存后重启终端。

• DevEco Studio中导入RNOH标红：同步依赖，清除编辑器缓存。

• 编译提示ninja警告：Clean Project，删除build文件夹后重新编译。【命令无法识别：清除npm缓存（npm cache clean --force），重新安装依赖。

五、总结

1. 核心是版本兼容，按要求安装对应版本的工具和依赖。

2. 关键步骤：生成RN的bundle文件，集成到鸿蒙工程，修改入口文件。

3. 遇到问题优先清缓存、同步依赖，所有配置修改后务必保存。

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