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

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

复制

“dev”: “react-native bundle-harmony –dev”

• 修改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运行工程。