本文原創發佈在華為開發者聯盟社區，歡迎前往與更多開發者進行互動。
更多相關問題可點擊原帖進行交流：已有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運行工程。