RN鸿蒙自定义TurboModule，调用原生方法

媒介：本文主要讲直接在项目中自定义TurboModule，通过TurboModule调用鸿蒙api。前提是已经运行成功RN鸿蒙化工程
1.声明 JavaScript 接口

新架构要求必须利用强类型风格语言声明 JavaScript 接口（Flow 和 TypeScript 皆可）。Codegen 会根据这些接口声明来生成强类型的语言，其中包罗 C++、Objective-C 和 Java。
对于声明类型的代码文件必须满意以下两点要求：

• 文件必须利用 Native<MODULE_NAME>命名，在利用 Flow 时，以 .js 或 .jsx 为后缀名；在利用 Typescript 时，以 .ts 或 .tsx 为后缀名。Codegen 只会找到匹配这些命名规则的文件；
  
• 代码中必须要输出 TurboModuleRegistrySpec 对象
  

NativeCalculator.ts

1. import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
2. import { TurboModuleRegistry } from "react-native";
4. export interface Spec extends TurboModule {
5.   add(a: number, b: number): Promise<number>;
6. }
8. export default TurboModuleRegistry.get<Spec>("RTNCalculator") as Spec | null;

复制代码

2. Codegen 设置

接下来，必要为 Codegen 和自动链接添加一些设置。Codegen 的作用是生成 C++ 脚手架代码，负责串联 JS 和原生侧。
有一些设置文件在 Android/iOS/HarmonyOS 平台是通用的，而有的仅能在某一平台利用。
2.1 设置 package.json 文件,在工程的package.json中添加如下：

1.   "harmony": {
2.     "codegenConfig": {
3.       "specPaths": [
4.         "./src/turboModule"
5.       ]
6.     }
7.   }

复制代码

2.2 设置 package.json 文件,在工程的package.json中添加如下：

1. "scripts": {
2. ...
3. "codegen": "react-native codegen-harmony --cpp-output-path ./MyApplication/entry/src/main/cpp/generated --rnoh-module-path ./MyApplication/entry/oh_modules/@rnoh/react-native-openharmony"
4. }

复制代码

实行 npm run codegen，日志中有如下产物分析实行成功（MyApplication\entry\src\main\cpp\generated\RTNCalculator.h
MyApplication\entry\src\main\cpp\generated\RTNCalculator.cpp
MyApplication/entry/oh_modules/@rnoh/react-native-openharmony/generated/turboModules/RTNCalculator.ts
）

1. • MyApplication\entry\src\main\cpp\generated\RTNCalculator.cpp
2. • MyApplication\entry\src\main\cpp\generated\RTNCalculator.h

复制代码

3. 原生代码

HarmonyOS 平台上 Turbo Native Module 的原生代码需实行如下步调：

• 创建用于实现模块的 CalculatorModule.ts
  
• 创建 CalculatorPackage.ts
  

创建MyApplication/entry/src/main/ets/CalculatorModule.ts

1. import { TurboModule } from '@rnoh/react-native-openharmony/ts';
2. import { TM } from "@rnoh/react-native-openharmony/generated/ts"
4. export class CalculatorModule extends TurboModule implements TM.RTNCalculator.Spec {
5.     add(a: number, b: number): Promise<number> {
6.         return new Promise((resolve) => resolve(a + b));
7.       }
8. }

复制代码

这个类实现了模块的功能，它继续了 TurboModule 类，对应 Android 里的 NativeCalculatorSpec。
创建用于实现模块的 MyApplication/entry/src/main/ets/CalculatorModule.ts

1. import {
2.   RNPackage,
3.   TurboModulesFactory,
4. } from "@rnoh/react-native-openharmony/ts";
5. import type {
6.   TurboModule,
7.   TurboModuleContext,
8. } from "@rnoh/react-native-openharmony/ts";
9. import { TM } from "@rnoh/react-native-openharmony/generated/ts";
10. import { CalculatorModule } from './CalculatorModule';
12. class CalculatorModulesFactory extends TurboModulesFactory {
13.   createTurboModule(name: string): TurboModule | null {
14.     if (name === TM.RTNCalculator.NAME) {
15.       return new CalculatorModule(this.ctx);
16.     }
17.     return null;
18.   }
20.   hasTurboModule(name: string): boolean {
21.     return name === TM.RTNCalculator.NAME;
22.   }
23. }
25. export class CalculatorPackage extends RNPackage {
26.   createTurboModulesFactory(ctx: TurboModuleContext): TurboModulesFactory {
27.     return new CalculatorModulesFactory(ctx);
28.   }
29. }

复制代码

4.将 Turbo Native Module 添加到 App,引入 Calculator TurboModule

打开 MyApp/harmony/entry/src/main/ets/RNPackageFactory.ts，添加：

1. import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts';
2. + import {CalculatorPackage} from './CalculatorPackage'
3. export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
4.   return [
5. +   new CalculatorPackage(ctx),
6.     ];
7. }

复制代码

编译、运行即可。
5.JavaScript侧利用

以下是一个在 App.js 中调用 add 方法的例子：
App.js

1. /**
2. * Sample React Native App
3. * https://github.com/facebook/react-native
4. *
5. * @format
6. * @flow strict-local
7. */
8. import React from "react";
9. import { useState } from "react";
10. import type { Node } from "react";
11. import { SafeAreaView, StatusBar, Text, Button } from "react-native";
12. import RTNCalculator from "rtn-calculator/src/NativeCalculator.js";
14. const App: () => Node = () => {
15.   const [result, setResult] = useState<number | null>(null);
16.   return (
17.     <SafeAreaView>
18.       <StatusBar barStyle={"dark-content"} />
19.       <Text style={{ marginLeft: 20, marginTop: 20 }}>
20.         3+7={result ?? "??"}
21.       </Text>
22.       <Button
23.         title="Compute"
24.         onPress={async () => {
25.           const value = await RTNCalculator.add(3, 7);
26.           setResult(value);
27.         }}
28.       />
29.     </SafeAreaView>
30.   );
31. };
32. export default App;

复制代码

如今，您可以运行 App 并查看在屏幕上显示的组件。
尾声：TurboModule自定义 ，它将TurboModule作为三方库来写的，方便打包为tgz,鸿蒙侧可以打包为har包。本文简化了构造结构，方便在项目中直接添加。
 ohos_react_native: React Native鸿蒙化堆栈

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。