当前位置：首页 > news >正文

详细介绍：React Native for OpenHarmony开发环境搭建指南（一）

news 2026/3/27 1:51:19

详细介绍：React Native for OpenHarmony开发环境搭建指南（一）

一、前置说明

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

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

1.1 Node.js

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

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

步骤2

1.1配置hdc环境变量

2.1配置 HDC_SERVER_PORT 环境变量

3.1配置 CAPI 版本环境变量

4.1React Native 鸿蒙化版本信息

三、开始创建React Native 工程

四、创建鸿蒙工程

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

1.添加harmony 脚本

2.安装鸿蒙化依赖包

3.配置 Metro 打包工具

4.生成 bundle 文件

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 镜像（解决下载慢）：
```
npm config set registry https://registry.npm.taobao.org/
```

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

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

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

步骤2

4.1React Native 鸿蒙化版本信息

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

核心包版本

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

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 适配代码。

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

小提示：
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,跳转到指定的目录下

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

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 默认界面，即代表环境搭建完成。

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

查看全文

http://www.jsqmd.com/news/389995/