已有React Native工程如何适配HarmonyOS

最新推荐文章于 2025-12-19 11:39:25 发布

原创最新推荐文章于 2025-12-19 11:39:25 发布 · 507 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react native #harmonyos #react.js #华为

本文原创发布在华为开发者联盟社区，欢迎前往与更多开发者进行互动。
更多相关问题可点击原帖进行交流：已有React Native工程如何适配HarmonyOS 。

问题描述

概述
React Native框架是一个基于JavaScript与React的开源框架，主要用于开发原生渲染的移动应用程序。React Native for OpenHarmony（RNOH）在React Native原有能力之上，进行了深度的鸿蒙化适配与扩展，使开发者能够基于熟悉的React技术栈，高效地构建适用于HarmonyOS的应用程序。

当前RNOH适配的React Native有两个版本0.72.5和0.77.1。0.72.5版本框架和三方库已经比较成熟，最新的版本为0.72.99，如果当前项目的RN版本低于该版本，可将当前项目的RN版本升级后，使用该版本进行HarmonyOS应用的构建，升级过程可参考RN升级需要开发者适配整理。RNOH会不断迭代和更新。最新版本及使用说明可查看ohos_react_native文档。

下文将详细描述如何基于已有的RN工程适配HarmonyOS：
1、环境变量配置

Windows环境：
在此电脑>属性>高级系统设置>高级>环境变量中，在系统变量中点击新建，添加变量名为：RNOH_C_API_ARCH，变量值为 1。
Mac环境：
a.编辑bash配置文件（例如~/.bash_profile、~/.bashrc或~/.zshrc）并在末尾添加以下行：

export RNOH_C_API_ARCH=1

b.确认环境变量是否成功设置。在终端中输入以下命令：

echo $RNOH_C_API_ARCH

如果输出为1，则表示环境变量已成功设置。

2、安装HarmonyOS版RN（RNOH）
打开RN工程，在根目录终端窗口中先执行npm install react-native@0.72.5将原RN版本修改为0.72.5，再执行npm install @react-native-oh/react-native-harmony安装RNOH，详细可参考RNOH依赖引入。

3、新建HarmonyOS工程
在RN工程根目录新建harmony文件夹，并在该文件夹中初始化一个HarmonyOS工程，详细步骤参考创建HarmonyOS工程至补充ArkTS侧代码章节。
目录结构：

RN                                               // RN工程

├──harmony                                       // harmony工程

│ ├──entry/src/main/cpp                         // native相关配置

│ │ ├──generated                               // codegen自动生成的桥接代码

│ │ ├──CMakeLists.txt

│ │ └──PackageProvider.cpp

│ ├──entry/src/main/ets

│ │ ├──entryability

│ │ │ └──EntryAbility.ets

│ │ ├──pages

│ │ │ └──Index.ets                            // harmony侧入口

│ │ └──RNPackagesFactory.ets

│ └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录

├──App.tsx

├──index.js                                      // 入口文件

├──metro.config.js                               // 打包配置

4、三方库替换
将原工程中的三方库替换为适配HarmonyOS的三方库版本，根据库名在RNOH三方库文档中搜索。文档中没有的三方库说明未进行适配，若为纯JS三方库可直接使用原库，否则建议优先在已适配库中寻找替代库。三方库的使用方法请参考Markdown文档中的步骤进行安装配置，需注意部分三方库需要使用Codegen生成桥接代码。

5、添加RN工程打包命令及打包配置

打开根目录下的package.json，在scripts下新增RNOH打包命令：

"dev": "react-native bundle-harmony --dev"

修改metro.config.js（建议不同平台使用不同的metro配置文件）

const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');

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

/**

* @type {import("metro-config").ConfigT}

*/

const config = {

  transformer: {

    getTransformOptions: async () => ({

      transform: {

        experimentalImportSupport: false,

        inlineRequires: true,

      },

    }),

  },

};

module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({

  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',

}), config);

6、与平台相关代码适配

JS代码中判断平台的Platform接口需要替换为从RNOH包中引用。
NativeModule（RN新架构中为TurboModule）参考RNOH版本TurboModule文档及示例工程。
NativeComponent参考自定义组件文档及示例工程。

7、打包运行

执行以下命令生成bundle和桥接代码：

npm run dev

npm run codegen

打开Harmony工程，连接真机并运行工程
- 点击 File > Project Structure，在弹窗界面点击 Signing Configs，勾选 Support OpenHarmony 和 Automatically generate signature，然后点击 Sign In 登录华为账号，并签名。
- 等待工程依赖同步完成后，点击运行图标执行run entry运行工程。