已有 React Native 工程如何适配 HarmonyOS

本文原创发布在华为开发者联盟社区，欢迎前往与更多开发者进行互动。更多相关问题可点击原帖进行交流：已有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 运行工程。