本文原創發佈在華為開發者聯盟社區，歡迎前往與更多開發者進行互動。
更多相關問題可點擊原帖進行交流：從零開始在HarmonyOS上開發React Native應用 。

問題描述

React Native框架是一個基於JavaScript與React的開源框架，主要用於開發原生渲染的移動應用程序。React Native for OpenHarmony（RNOH）在React Native原有能力之上，進行了深度的鴻蒙化適配與擴展，使開發者能夠基於熟悉的React技術棧，高效地構建適用於HarmonyOS的應用程序。

從0到1構建HarmonyOS React-Native項目主要涉及以下幾部分：

1. 環境準備
2. 創建React Native工程
3. 創建HarmonyOS工程
4. 在HarmonyOS工程中集成RNOH
5. 加載Bundle包
6. 啓動並運行工程

解決方案

1.環境準備

1.下載與安裝DevEco Studio

選擇最新的release版本下載並安裝：

2.設置 DevEco Studio 代理

DevEco Studio 開發環境需要依賴於網絡環境，需要連接上網絡才能確保工具的正常使用，詳情請參考配置代理。

3.配置 CAPI 版本環境變量

當前React-Native框架提供的Demo工程默認為CAPI版本，需要配置環境變量RNOH_C_API_ARCH = 1。

4.編輯用户級 .npmrc 配置文件

為了使用加速 npm 包的下載，可以配置鏡像源，關閉 SSL 證書校驗還可以進一步加速下載，但是這會降低安全性，需用户評估後再使用。

配置文件位置：C:\Users\用户名.npmrc（Windows），如果沒有可以手動創建。
修改 registry 後需執行 npm cache clean --force 清理緩存，以確保新的 registry 生效。參考.npmrc 配置文件內容如下：

strict-ssl=false
sslVerify=false
registry=https://repo.huaweicloud.com/repository/npm/

5.hdc環境配置

hdc 是 OpenHarmony 為開發人員提供的用於調試的命令行工具，HarmonyOS ReactNative 工程使用 hdc 進行真機調試。

hdc 工具通過 OpenHarmony SDK 獲取，存放於 SDK 的 toolchains 目錄下，請將 {DevEco Studio安裝路徑}/sdk/{SDK版本}/openharmony/toolchains 的完整路徑添加到環境變量中。

6.設備調試可選擇使用本地真機運行應用或者使用模擬器運行應用。

2.創建ReactNative工程

1.創建新項目

可選擇一個目錄，例如 D 盤根目錄，使用 ReactNative 內置的命令行工具來創建一個名為 “MyRNProject” 的新項目。

這個命令行工具不需要安裝，可以直接用 node 自帶的npx命令來創建，目前 ReactNative for OpenHarmony 僅支持 0.72.5 版本的 ReactNative。

npx react-native@0.72.5 init MyRNProject --version 0.72.5

命令運行結果如下：

運行成功後會在D:\RN目錄下創建MyRNProject文件夾，文件夾目錄結構如下：

2.配置鴻蒙依賴

打開 MyRNProject 目錄下的 package.json，在 scripts 下新增 OpenHarmony 的依賴, 添加依賴後的package.json文件如下所示。

{
 "name": "AwesomeProject",
 "version": "0.0.1",
 "private": true,
 "scripts": {
   "android": "react-native run-android",
   "ios": "react-native run-ios",
   "lint": "eslint .",
   "start": "react-native start",
   "test": "jest",
   "dev": "react-native bundle-harmony --dev"
 },
 "dependencies": {
   "react": "18.2.0",
   "react-native": "0.72.5"
 },
 "devDependencies": {
   "@babel/core": "^7.20.0",
   "@babel/preset-env": "^7.20.0",
   "@babel/runtime": "^7.20.0",
   "@react-native/eslint-config": "^0.72.2",
   "@react-native/metro-config": "^0.72.11",
   "@tsconfig/react-native": "^3.0.0",
   "@types/react": "^18.0.24",
   "@types/react-test-renderer": "^18.0.0",
   "babel-jest": "^29.2.1",
   "eslint": "^8.19.0",
   "jest": "^29.2.1",
   "metro-react-native-babel-preset": "0.76.8",
   "prettier": "^2.4.1",
   "react-test-renderer": "18.2.0",
   "typescript": "4.8.4"
 },
 "engines": {
   "node": ">=16"
 }
}

3.安裝鴻蒙依賴包

在 AwesomeProject 目錄下運行安裝依賴包命令：

npm i @react-native-oh/react-native-harmony

4.配置metro.config.js並添加OpenHarmony適配代碼

右鍵選擇記事本打開 AwsomeProject\metro.config.js，並添加 OpenHarmony 的適配代碼。配置文件的詳細介紹，可以參考React Native 中文網。修改完成後的文件內容如下：

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);

5.生成bundle

在 AwesomeProject 目錄下運行生成 bundle 文件的命令。

npm run dev

成功運行結果如下：

如遇報錯：error: unknown command 'bundle-harmony'，需要手動在D:\RN\MyRNProject\MyRNProject\package.json文件中添加依賴：

"memfs":"^4.17.2"

運行成功後，會在 AwesomeProject/harmony/entry/src/main/resources/rawfile 目錄下生成 bundle.harmony.js 和 assets 文件夾，assets 用來存放圖片（如果 bundle 中不涉及本地圖片，則沒有 assets 文件夾）:

3.創建HarmonyOs工程

1.打開deveco studio, 創建新工程。

點擊 Next 按鈕，並在 Compile SDK 中選擇 API20，創建一個名為 “MyRNApplication” 的項目。注意項目路徑不要太長，如圖所示：

2.配置簽名

連接真機，點擊 File > Project Structure，在彈窗界面點擊 Signing Configs，勾選 Support HarmonyOS 和 Automatically generate signature，然後點擊 Sign In 登錄華為賬號，並簽名。

3.添加 React Native 配置

在剛創建的HarmonyOS工程的entry（D:\RN\MyRNApplication\entry>）目錄下執行命令：

ohpm i @rnoh/react-native-openharmony

執行完成後會在工程級目錄以及模塊級目錄下生成 oh_modules 文件夾。

4.在HarmonyOS工程中集成RNOH

1.補充CPP側代碼

在D:\RN\MyRNApplication\entry\src\main目錄下新建cpp文件夾，並新增CMakeLists.txt文件：

將 RNOH 的適配層代碼添加到CMakeLists.txt中用於編譯生成librnoh_app.so，例如將以下代碼複製到新創建的CMakeLists.txt中：

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")

set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/src/main/cpp")
set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated")
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
add_compile_definitions(WITH_HITRACE_SYSTRACE)
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

add_library(rnoh_app SHARED
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)

target_link_libraries(rnoh_app PUBLIC rnoh)

2.在cpp 目錄下新增 PackageProvider.cpp並複製以下代碼。

#include "RNOH/PackageProvider.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {};
}

3.打開 MyRNApplication\entry\build-profile.json5，將 cpp 中的代碼添加到應用工程的編譯構建任務中。

如果在 x86_64 架構的模擬器上運行應用，需在 externalNativeOptions 配置中額外添加 abiFilters 字段，幷包含 x86_64 架構參數。

如下所示，abiFilters 字段當前被註釋，默認僅構建適用於 arm64-v8a 架構的版本。詳細介紹可以參考模塊級build-profile.json5。

{
 "apiType": "stageMode",
 "buildOption": {
+   "externalNativeOptions": {
+      "path": "./src/main/cpp/CMakeLists.txt",
+      "arguments": "",
+      "cppFlags": "",
+      // "abiFilters": ["arm64-v8a", "x86_64"]
+    }
 },
 "targets": [
   {
     "name": "default"
   },
   {
     "name": "ohosTest",
   }
 ]
}

4.補充ArkTS側的代碼

打開 MyRNApplication\entry\src\main\ets\entryability\EntryAbility.ets，替換為如下代碼。

import { RNAbility } from '@rnoh/react-native-openharmony';
import { hilog } from '@kit.PerformanceAnalysisKit';

export default class EntryAbility extends RNAbility {
  getPagePath() {
    return 'pages/Index';
  }

  override onCreate(want: Want): void {
    super.onCreate(want);
    hilog.info(0x0000, 'testTag', '%{public}s', 'EntryAbility onCreate');
  }
}

5.在 MyRNApplication\entry\src\main\ets 目錄下新增 RNPackagesFactory.ets, 複製如下代碼。

import { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [];
}

6.打開 MyRNApplication\entry\src\main\ets\pages\Index.ets，添加RNOH的使用代碼，修改後如下。

import {
  AnyJSBundleProvider,
  ComponentBuilderContext,
  FileJSBundleProvider,
  MetroJSBundleProvider,
  ResourceJSBundleProvider,
  RNApp,
  RNOHErrorDialog,
  RNOHLogger,
  TraceJSBundleProviderDecorator,
  RNOHCoreContext
} from '@rnoh/react-native-openharmony';
import { createRNPackages } from '../RNPackagesFactory';

@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {}

const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent)

@Entry
@Component
struct Index {
  @StorageLink('RNOHCoreContext') private rnohCoreContext: RNOHCoreContext | undefined = undefined
  @State shouldShow: boolean = false
  private logger!: RNOHLogger

  aboutToAppear() {
    this.logger = this.rnohCoreContext!.logger.clone("Index")
    const stopTracing = this.logger.clone("aboutToAppear").startTracing();

    this.shouldShow = true
    stopTracing();
  }

  onBackPress(): boolean | undefined {
    // NOTE: this is required since `Ability`'s `onBackPressed` function always
    // terminates or puts the app in the background, but we want Ark to ignore it completely
    // when handled by RN
    this.rnohCoreContext!.dispatchBackPress()
    return true
  }

  build() {
    Column() {
      if (this.rnohCoreContext && this.shouldShow) {
        if (this.rnohCoreContext?.isDebugModeEnabled) {
          RNOHErrorDialog({ ctx: this.rnohCoreContext })
        }
        RNApp({
          rnInstanceConfig: {
            createRNPackages,
            enableNDKTextMeasuring: true, // 該項必須為true，用於開啓NDK文本測算
            enableBackgroundExecutor: false,
            enableCAPIArchitecture: true, // 該項必須為true，用於開啓CAPI
            arkTsComponentNames: []
          },
          initialProps: { "foo": "bar" } as Record<string, string>,
          appKey: "AwesomeProject",
          wrappedCustomRNComponentBuilder: wrappedCustomRNComponentBuilder,
          onSetUp: (rnInstance) => {
            rnInstance.enableFeatureFlag("ENABLE_RN_INSTANCE_CLEAN_UP")
          },
          jsBundleProvider: new TraceJSBundleProviderDecorator(
            new AnyJSBundleProvider([
              new MetroJSBundleProvider(),
              // NOTE: to load the bundle from file, place it in
              // `/data/app/el2/100/base/com.rnoh.tester/files/bundle.harmony.js`
              // on your device. The path mismatch is due to app sandboxing on OpenHarmony
              new FileJSBundleProvider('/data/storage/el2/base/files/bundle.harmony.js'),
              new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'hermes_bundle.hbc'),
              new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'bundle.harmony.js')
            ]),
            this.rnohCoreContext.logger),
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

RNApp的參數appKey需要與RN工程中AppRegistry.registerComponent註冊的appName保持一致，否則會導致白屏。

5.加載bundle包

本地加載 bundle。將MyRNProject\harmony\entry\src\main\resources\rawfile目錄下的 bundle 文件和 assets 文件夾粘貼複製到HarmonyOS工程MyRNApplication\entry\src\main\resources\rawfile路徑下，在 entry/src/main/ets/pages/Index.ets 中使用。

6.啓動並運行工程

使用 DevEco Studio 運行 MyRNApplication 工程。如果運行按鈕灰色不可用，需要先執行file->sync and refresh project。

執行完成後，控制枱如圖所示：

首次運行耗時可能需要10分鐘左右，請耐心等待。

運行結果：