在鸿蒙（HarmonyOS）生态中集成 React Native 库，主要依托于 RNOH（React Native for OpenHarmony） 框架。RNOH 在 React Native 原有能力之上进行了深度的鸿蒙化适配，通过桥接机制将 RN 的 JS 代码与鸿蒙原生 ArkTS/C++ 组件连接起来。

以下是集成 RN 生态组件到鸿蒙的核心流程与关键技术点：

1. 核心架构与桥接原理

RNOH 的底层架构分为三层，通过 JSI/NAPI 进行通信：

• JS 层：开发者编写的 React/TS 业务代码，通过 Metro 打包成 bundle.harmony.js。
• 原生层 (ArkTS)：包含 RNOH 提供的 RNApp、RNAbility 以及开发者自定义的原生组件（如 .ets 文件）。
• C++ 层：包含 RNOH 引擎、TurboModule 注册与通信、以及 Codegen 自动生成的桥接代码。

2. 集成与适配核心步骤

要在鸿蒙工程中复用现有的 RN 组件或三方库，通常需要经历以下关键步骤：

• 环境配置与依赖安装：
  必须配置环境变量 RNOH_C_API_ARCH=1（Windows 或 Mac 均需配置），这是构建成功的前提。随后在项目中安装鸿蒙版的 RN 依赖，例如 @react-native-oh/react-native-harmony。
• 工程目录初始化：
  在 RN 工程根目录下新建 harmony 文件夹，并初始化鸿蒙工程。该目录会包含原生相关的 C++ 配置（src/main/cpp）、ArkTS 侧入口（src/main/ets）以及 bundle 静态资源存放目录（rawfile）。
• 三方库替换与移植（核心难点）：
  不能直接使用普通的 RN 三方库。必须在 RNOH 官方三方库文档中搜索对应的鸿蒙适配版本。如果官方已适配，需按照文档修改 package.json、CMakeLists.txt 及相关的 C++/ArkTS 代码；如果未适配，纯 JS 库可直接使用，否则需寻找替代库或基于 Fabric 自定义组件进行原生重写。
• 生成桥接代码：
  部分三方库和原生模块需要使用 Codegen 工具自动生成桥接代码，以打通 JS 与原生层的通信。

3. 平台相关代码适配

在 JS 业务代码中，原有的跨平台判断逻辑需要进行替换：

• Platform 接口：JS 代码中判断平台的 Platform 接口，需要替换为从 RNOH 包中引用的版本。
• 原生模块通信：若涉及 NativeModule（在新架构中为 TurboModule）或 NativeComponent，需参考 RNOH 提供的 TurboModule 文档和自定义组件示例进行接口层的鸿蒙化改造。

4. 打包与运行

完成代码适配后，通过配置 metro.config.js 并执行 npm run dev 生成鸿蒙专属的 bundle，再执行 npm run codegen 生成桥接代码。最后在 DevEco Studio 中打开鸿蒙工程，配置签名并运行到真机或模拟器上。

一、 构建配置隔离：metro.config.js

在 RN 工程根目录下配置 Metro，确保打包时能精准识别鸿蒙平台的依赖与资源路径。

const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');

module.exports = createHarmonyMetroConfig({
  // 鸿蒙专属配置注入
  harmonyConfig: {
    // 指定鸿蒙工程的根目录
    harmonyRoot: './harmony',
  },
  // 配置资源解析路径，确保图片等静态资源能正确打入 rawfile
  resolver: {
    assetExts: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'json'],
  },
});

二、 原生容器接管：EntryAbility.ets

鸿蒙的入口 Ability 必须继承 RNOH 提供的 RNAbility，这是承载 React Native 视图的核心容器。

import { RNAbility } from '@react-native-oh/react-native-harmony';
import { AbilityConstant, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends RNAbility {
  // 核心：指定 JS Bundle 的入口组件名称（对应 JS 侧 AppRegistry 注册的名称）
  getPagePath(): string {
    return 'index'; 
  }

  async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): Promise<void> {
    super.onCreate(want, launchParam);
    // 可在此处初始化鸿蒙原生的全局服务或分布式能力
    console.log('RNOH EntryAbility onCreate');
  }

  async onWindowStageCreate(windowStage: window.WindowStage): Promise<void> {
    // 调用父类方法，自动完成 RN 视图树的挂载与渲染
    super.onWindowStageCreate(windowStage);
  }
}

三、 C++ 原生模块注册：PackageProvider.cpp

当需要暴露鸿蒙系统级 API（如相机、传感器）给 JS 层时，需在 C++ 层进行 TurboModule 的注册。

#include "PackageProvider.h"
#include "RNOH/ArkTSTurboModuleFactory.h"

using namespace rnoh;

// 注册自定义的原生模块包
std::vector<std::shared_ptr<TurboModule>> PackageProvider::getModules(
    rnoh::TurboModuleContext context) {
    
    std::vector<std::shared_ptr<TurboModule>> modules;
    
    // 示例：注册一个自定义的鸿蒙设备信息模块
    modules.push_back(std::make_shared<HarmonyDeviceInfoModule>(context));
    
    return modules;
}

四、 ArkTS 侧模块工厂：RNPackagesFactory.ets

在 ArkTS 侧管理跨语言通信的桥梁，将 C++ 模块或纯 ArkTS 组件暴露给 JS 层。

import { RNPackageContext, RNPackage } from '@react-native-oh/react-native-harmony';

export class RNPackagesFactory {
  static getPackages(context: RNPackageContext): RNPackage[] {
    return [
      // 在这里注册需要在 ArkTS 侧处理的自定义组件或模块
      // new CustomHarmonyPackage() 
    ];
  }
}

五、 JS 侧平台隔离与调用：DeviceInfo.ts

在业务代码中，通过 RNOH 提供的 Platform 进行精准的平台判断，并安全调用原生模块。

import { Platform, NativeModules } from 'react-native';
// 【关键】必须从 RNOH 包中引入 Platform，而非直接使用 RN 原生的
import { Platform as RNOHPlatform } from '@react-native-oh/react-native-harmony';

export const getDeviceInfo = async () => {
  if (RNOHPlatform.OS === 'harmony') {
    // 调用鸿蒙原生模块
    const { HarmonyDeviceInfo } = NativeModules;
    return await HarmonyDeviceInfo.getDeviceModel();
  } else if (Platform.OS === 'ios') {
    return 'iOS Device';
  }
  return 'Android Device';
};