React Native for OpenHarmony开发环境搭建指南（一）

目录
一、前置说明

[二、环境搭建步骤（Windows 为例）](#二、环境搭建步骤（Windows 为例）)

[步骤 1：安装基础依赖（必装）](#步骤 1：安装基础依赖（必装）)

[1.1 Node.js](#1.1 Node.js)

[1.2 Git（版本控制 + 项目拉取）](#1.2 Git（版本控制 + 项目拉取）)

[1.3 DevEco Studio + HarmonyOS SDK（鸿蒙核心环境）](#1.3 DevEco Studio + HarmonyOS SDK（鸿蒙核心环境）)

步骤2

1.1配置hdc环境变量

[2.1配置 HDC_SERVER_PORT 环境变量](#2.1配置 HDC_SERVER_PORT 环境变量)

[3.1配置 CAPI 版本环境变量](#3.1配置 CAPI 版本环境变量)

[4.1React Native 鸿蒙化版本信息](#4.1React Native 鸿蒙化版本信息)

[三、开始创建React Native 工程](#三、开始创建React Native 工程)

四、创建鸿蒙工程

[五、安装鸿蒙依赖包并生成 bundle](#五、安装鸿蒙依赖包并生成 bundle)

[1.添加harmony 脚本](#1.添加harmony 脚本)

2.安装鸿蒙化依赖包

[3.配置 Metro 打包工具](#3.配置 Metro 打包工具)

[4.生成 bundle 文件](#4.生成 bundle 文件)

[5.在原生工程鸿蒙侧配置 React Native for OpenHarmony](#5.在原生工程鸿蒙侧配置 React Native for OpenHarmony)

六、总结

一、前置说明

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

它的优势如下：

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

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

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

1.1 Node.js

下载地址：https://nodejs.org/（选择v16.x/v18.x LTS 版本，RN4OH 暂不兼容 v20+）；
安装：勾选「Add to PATH」，一路下一步；
验证：管理员打开 CMD，输入node -v和npm -v，能显示版本号即成功；
优化（可选）：切换 npm 镜像（解决下载慢）：
javascript 复制代码
```
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的关键，必须安装：

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

步骤2

1.1配置hdc环境变量

🖱️ 右键点击 "开始" 按钮（或按 Win + X）
👆 点击 "系统" → "高级系统设置" → "环境变量"
🔍 在 "系统变量" 区域，找到 "Path" 变量
✏️ 点击 "编辑" ，添加 hdc 工具的完整路径
html 复制代码
```
{DevEco Studio安装路径}/sdk/{SDK版本}/openharmony/toolchains
```
如图所示：记得改成自己的地址
2.1配置 HDC_SERVER_PORT 环境变量

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

3.1配置 CAPI 版本环境变量

➕ 在 "系统变量" 区域，点击 "新建" 按钮
📝 填写变量信息：
- 变量名 ：RNOH_C_API_ARCH
- 变量值 ：1
✅ 点击 "确定" 保存

4.1验证环境配置

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

Delphi 复制代码

hdc version

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

4.1React Native 鸿蒙化版本信息

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

核心包版本

三、开始创建React Native 工程

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

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

Delphi 复制代码

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

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

🎉 恭喜！ 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 适配代码。

Delphi 复制代码

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 文件：

javascript 复制代码

npm run harmony

💡 小提示：

bundle 文件包含了你的 React Native 代码和依赖

每次修改代码后，需要重新运行 npm run harmony 生成新的 bundle

开发模式下使用 --dev 参数，生产环境使用 --release 参数

如果生成失败，检查 metro.config.js 配置是否正确

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

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

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

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

javascript 复制代码

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

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

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

六、总结

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

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