React Native跨平台鸿蒙开发高级应用原理：ArkTS TurboModule的如何实现

m0_68635815

362人浏览 · 2025-10-13 18:24:34

m0_68635815 · 2025-10-13 18:24:34 发布

This documentation is based on React Native documentation licensed under the CC-BY-4.0 license at https://reactnative.cn/docs/0.72/the-new-architecture/pillars-turbomodules. © Meta Platforms Inc. Changed to How to create a TurboModule on OpenHarmony.

在React Native中，自定义TurboModule的实现涉及到对原生模块的直接操作，这通常用于提高性能和灵活性。TurboModules是React Native为了提高模块加载速度和减少运行时开销而引入的一种机制。下面将详细介绍如何自定义一个TurboModule。

ReactNative新架构的两个核心支柱是TurboModule和Fabric渲染器，前者的功能是提供一个Native的模块，比如蓝牙之类的，后者则是提供一个自定义Native UI组件的能力，ReactNative本身虽然提供了非常多的组件，但是如果想要实现像Android自定义View一些复杂的组件UI效果，就需要自己定义Fabric组件，其实他们的核心都是通过jsi实现js和Native通信，然后在Android上则是通过jni实现Java和C++通信，最终达到js和Java层通信的效果，TurboModule和Fabric只是提供的接口不同，流程不同。

我们这一节先来了解一下TurboModule，TurboModule的逻辑相较于Fabric更加简单一些，所以先从TurboModule开始学习。

关于TurboModule的使用ReactNative官网上有详细的流程，我们就不过多介绍了，主要来介绍一下TurboModule的组件做了什么。

自定义TurboModule的实现

ArkTS TurboModule的实现

目录结构

您可以将 TurboModule 声明为一个模块，并作为一个依赖的方式添加到您的项目中。

您可以在 React Native 工程 MyApp 的同级创建一个名为 RTNCalculator 的目录，并创建一个 src/specs 子目录，并根据使用的 Codegen 的版本不同，分别创建 v1、v2 子目录，创建后的目录结构是这样的：

├── MyApp
└── RTNCalculator
    └── src
        └── specs
            ├── v1
            └── v2

声明 JavaScript 接口

在 RTNCalculator 目录下新建 index.ts，并导出接口声明文件。接口声明文件 NativeCalculator.ts 根据您的需要，放置在 v1 或 v2 目录下，本示例放在了 V2 路径下。接口声明文件可以使用 Flow 或 TypeScript 语言编写。

// index.ts
import NativeCalculator from "./src/specs/v2/NativeCalculator";

export const RTNCalculator = NativeCalculator;

npm 不会打包空文件夹，需要通过在 v1 中实现 .gitkeep 的方式保留该目录。

对文件的建议和要求如下：

建议文件命名为 Native<MODULE_NAME>；
代码中必须输出 TurboModuleRegistrySpec 对象。

// NativeCalculator.ts
import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): Promise<number>;
}

export default TurboModuleRegistry.get<Spec>(
  'RTNCalculator',
) as Spec | null;

模块配置

在 RTNCalculator 目录下新增 package.json：

{
  "name": "rtn-calculator",
  "version": "1.0.0",
  "description": "Add numbers with TurboModules",
  "main": "index.ts",
  "keywords": [],
  "author": "<Your Name> <your_email@your_provider.com> (https://github.com/<your_github_handle>)",
  "license": "ISC",
  "harmony": {
    "alias": "rtn-calculator",
    "codegenConfig": [
      {
        "version": 1,
        "specPaths": [
            "./src/specs/v1"
        ]
      },
      {
        "version": 2,
        "specPaths": [
          "./src/specs/v2"
        ]
      }
    ]
  },
  "files": [
    "index.ts",
    "src/*",
    "harmony.tar.gz"
  ],
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "devDependencies": {
    "@types/react": "^18.2.47",
    "react": "18.2.0",
    "react-native": "0.72.5"
  },
  "dependencies": {}
}