目录

一、前置说明

 React Native for OpenHarmony 是什么：它是基于 React Native 适配 Harmony（鸿蒙）的框架，能让 React Native 代码直接运行在 Harmony 设备 / 模拟器上，也可以让代码在ios/Andriod系统上顺利运行。

它的优势如下：

• ✅跨平台能力：一次编写，多端复用
• ✅开发效率：前端技术栈直接复用，迭代速度翻倍
• ✅性能表现：接近原生，满足绝大多数场景
• ✅生态与社区：成熟稳定，问题可快速解决
• ✅团队与成本优势：前端人才直接转型，资源复用
• 

二、环境搭建步骤（Windows 为例）

步骤 1：安装基础依赖（必装）

1.1 Node.js 

1. 下载地址：https://nodejs.org/（选择v16.x/v18.x LTS 版本，RN4OH 暂不兼容 v20+）；
2. 安装：勾选「Add to PATH」，一路下一步；
3. 验证：管理员打开 CMD，输入node -v和npm -v，能显示版本号即成功；
4. 优化（可选）：切换 npm 镜像（解决下载慢）：

   npm config set registry https://registry.npm.taobao.org/

1.2 Git（版本控制 + 项目拉取）

• 下载地址：https://git-scm.com/（安装时勾选「Git Bash Here」「Add to PATH」）；
• 验证：CMD 输入 git --version，显示版本号即成功。
• 

1.3 DevEco Studio + HarmonyOS SDK（鸿蒙核心环境）

这是  React Native 对接 OpenHarmony 的关键，必须安装：

1. 下载 DevEco Studio：https://developer.harmonyos.com/cn/develop/deveco-studio/（选择最新稳定版）；
2. 安装步骤：
   • 运行安装包，勾选「DevEco Studio」+「HarmonyOS SDK」；
   • 安装路径建议选非中文目录（比如D:\DevEcoStudio）；
   • 安装完成后，启动 DevEco Studio，会自动下载 HarmonyOS SDK（选择API 9/10/11，RN4OH 主流适配版本）；
3. 记住 SDK 路径（后续配置环境变量用）：
   • 路径示例：E:\HarmonyOS\OpenHarmony\Sdk（可在 DevEco Studio 的「File→Settings→Appearance & Behavior→System Settings→HarmonyOS SDK」查看）。

 步骤2 

1.1配置hdc环境变量

1. 🖱️ 右键点击 “开始” 按钮（或按 Win + X）
2. 👆 点击 “系统” → “高级系统设置” → “环境变量”
3. 🔍 在 “系统变量” 区域，找到 “Path” 变量
4. ✏️ 点击 “编辑”，添加 hdc 工具的完整路径

   {DevEco Studio安装路径}/sdk/{SDK版本}/openharmony/toolchains

   如图所示：记得改成自己的地址

   1. 

   2.1配置 HDC_SERVER_PORT 环境变量

• hdc还需要配置端口来连接设备，还是需要设置环境变量
• 变量名：HDC_SERVER_PORT
• 变量值：1688（或任意未被占用的端口号）
• ✅ 点击 “确定” 保存

3.1配置 CAPI 版本环境变量

1. ➕ 在 “系统变量” 区域，点击 “新建” 按钮

2. 📝 填写变量信息：

   • 变量名：RNOH_C_API_ARCH
   • 变量值：1

3. ✅ 点击 “确定” 保存

4.1验证环境配置

配置完成后，需要先检查一下是否配置成功，所以就需要打开cmd，输入如下

hdc version

显示出版本号，说明环境配置成功

 4.1React Native 鸿蒙化版本信息

当前 React Native 鸿蒙版本基于社区 RN 0.72.5 进行适配，以下是版本信息：

核心包版本

三、开始创建React Native 工程

1. 可以创建一个文件夹，存放自己所有的项目文件，建议不要建在C盘，其他盘都可以
2. cmd定位到当前目录，注意：文件中不能有中文的字符，不然会创建失败
3. 
4. 

使用如下命令创建项目， 项目名：AtomGitNews

npx react-native@0.72.5 init AtomGitNews --version 0.72.5

1. ⚠️ 重要提示：必须使用 0.72.5 版本，这是目前 React Native for OpenHarmony 唯一支持的版本
2. 

🎉 恭喜！ React Native 工程创建成功！

可以先启动一下项目，看看有没有安装成功，npm start

如下图所示表示项目已启动

四、创建鸿蒙工程

React Native 工程创建完成后，打开 DevEco Studio，启动这个软件，点击 “Create Project” 按钮，打开工程创建向导

配置工程信息
📝 填写工程配置信息：

工程名称：可以保持默认或自定义
工程包名：保持默认即可（例如：com.example.myapplication）
工程存储位置：重要 - 选择 React Native 工程根目录，并设置子目录名称为 harmony
最低兼容SDK版本：选择 API 20 或更高版本
模块名称：保持默认即可
设备类型：选择 Phone（手机）
 工程存储位置必须设置为：{React Native工程根目录}/harmony

检查配置信息无误后，点击Finsh按钮，即创建成功

如图所示：

五、安装鸿蒙依赖包并生成 bundle

现在我们需要为 React Native 工程安装 OpenHarmony 适配包，并配置 Metro 打包工具来生成 bundle 文件。

1.添加harmony 脚本

使用Vscode打开AtomGitNews 项目，打开package.json文件，在里面加上"harmony": "react-native bundle-harmony --dev"

2.安装鸿蒙化依赖包

npm i @react-native-oh/react-native-harmony@0.72.90
 重要提示：依赖包版本必须为 0.72.90，与 React Native 鸿蒙化版本信息保持一致。

安装成功后

3.配置 Metro 打包工具

在执行生成 bundle 命令前，需要先为 React Native 工程配置 OpenHarmony 能力。打开工程根目录下的 metro.config.js 文件，增加 OpenHarmony 适配代码。

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const {createHarmonyMetroConfig} = require("@react-native-oh/react-native-harmony/metro.config");

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
    transformer: {
        getTransformOptions: async () => ({
            transform: {
                experimentalImportSupport: false,
                inlineRequires: true
            }
        })
    }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony'
}), config);

4.生成 bundle 文件

 输入以下命令生成 bundle 文件：

npm run harmony

💡 小提示：

1. bundle 文件包含了你的 React Native 代码和依赖
2. 每次修改代码后，需要重新运行 npm run harmony 生成新的 bundle
3. 开发模式下使用 --dev 参数，生产环境使用 --release 参数
4. 如果生成失败，检查 metro.config.js 配置是否正确

5.在原生工程鸿蒙侧配置 React Native for OpenHarmony

现在打开鸿蒙软件需要在鸿蒙原生工程中集成React Native for OpenHarmony，这样React Native才能顺利在HarmonyOS 平台上顺利运行

在 DevEco Studio 中，右键点击 entry 目录，选择 “Open In > Terminal” 在底部控制台打开命令提示符，直接 cd entry,跳转到指定的目录下

在控制台中输入如下命令：

ohpm i @rnoh/react-native-openharmony@0.72.90

⚠️ 重要提示：版本必须为 0.72.90，与 React Native 引入的 @react-native-oh/react-native-harmony 依赖版本保持一致。

执行完成后，会在工程级目录以及模块级目录下生成 oh_modules 文件夹

1. ---

   六、总结

1. 核心依赖：Node.js（16/18 LTS）+ DevEco Studio（含 HarmonyOS SDK）+ RN4OH CLI 是搭建  React Native for OpenHarmony 环境的三大核心，版本和路径配置不能错；
2. 关键配置：必须正确设置OH_SDK_PATH环境变量，否则无法对接鸿蒙编译环境；
3. 验证标准：能成功初始化项目并在鸿蒙模拟器 / 真机上显示  React Native for OpenHarmony 默认界面，即代表环境搭建完成。

如果运行中遇到具体报错（比如编译失败、模拟器连接异常），可以发到评论区具体的错误信息，我会帮你针对性解决。