本文原创发布在华为开发者联盟社区，欢迎前往与更多开发者进行互动。更多相关问题可点击原帖进行交流：已有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文档及示例工程。
7、打包运行
执行以下命令生成 bundle 和桥接代码：
npm run dev
npm run codegen
打开 Harmony 工程，连接真机并运行工程
点击 File > Project Structure，在弹窗界面点击 Signing Configs，勾选 Support OpenHarmony 和 Automatically generate signature，然后点击 Sign In 登录华为账号，并签名。
等待工程依赖同步完成后，点击运行图标执行 run entry 运行工程。
