RN鸿蒙自定义TurboModule，调用原生方法
媒介：本文主要讲直接在项目中自定义TurboModule，通过TurboModule调用鸿蒙api。前提是已经运行成功RN鸿蒙化工程1.声明 JavaScript 接口
https://i-blog.csdnimg.cn/direct/9b3eb321708e4b43bd3970ff5c588e90.png
新架构要求必须利用强类型风格语言声明 JavaScript 接口（Flow 和 TypeScript 皆可）。Codegen 会根据这些接口声明来生成强类型的语言，其中包罗 C++、Objective-C 和 Java。
对于声明类型的代码文件必须满意以下两点要求：
[*]文件必须利用 Native<MODULE_NAME>命名，在利用 Flow 时，以 .js 或 .jsx 为后缀名；在利用 Typescript 时，以 .ts 或 .tsx 为后缀名。Codegen 只会找到匹配这些命名规则的文件；
[*]代码中必须要输出 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;
2. Codegen 设置
接下来，必要为 Codegen 和自动链接添加一些设置。Codegen 的作用是生成 C++ 脚手架代码，负责串联 JS 和原生侧。
有一些设置文件在 Android/iOS/HarmonyOS 平台是通用的，而有的仅能在某一平台利用。
2.1 设置 package.json 文件,在工程的package.json中添加如下：
"harmony": {
"codegenConfig": {
"specPaths": [
"./src/turboModule"
]
}
} 2.2 设置 package.json 文件,在工程的package.json中添加如下：
"scripts": {
...
"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"
} 实行 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
）
• MyApplication\entry\src\main\cpp\generated\RTNCalculator.cpp
• MyApplication\entry\src\main\cpp\generated\RTNCalculator.h
3. 原生代码
HarmonyOS 平台上 Turbo Native Module 的原生代码需实行如下步调：
[*]创建用于实现模块的 CalculatorModule.ts
[*]创建 CalculatorPackage.ts
创建MyApplication/entry/src/main/ets/CalculatorModule.ts
import { TurboModule } from '@rnoh/react-native-openharmony/ts';
import { TM } from "@rnoh/react-native-openharmony/generated/ts"
export class CalculatorModule extends TurboModule implements TM.RTNCalculator.Spec {
add(a: number, b: number): Promise<number> {
return new Promise((resolve) => resolve(a + b));
}
}
这个类实现了模块的功能，它继续了 TurboModule 类，对应 Android 里的 NativeCalculatorSpec。
创建用于实现模块的 MyApplication/entry/src/main/ets/CalculatorModule.ts
import {
RNPackage,
TurboModulesFactory,
} from "@rnoh/react-native-openharmony/ts";
import type {
TurboModule,
TurboModuleContext,
} from "@rnoh/react-native-openharmony/ts";
import { TM } from "@rnoh/react-native-openharmony/generated/ts";
import { CalculatorModule } from './CalculatorModule';
class CalculatorModulesFactory extends TurboModulesFactory {
createTurboModule(name: string): TurboModule | null {
if (name === TM.RTNCalculator.NAME) {
return new CalculatorModule(this.ctx);
}
return null;
}
hasTurboModule(name: string): boolean {
return name === TM.RTNCalculator.NAME;
}
}
export class CalculatorPackage extends RNPackage {
createTurboModulesFactory(ctx: TurboModuleContext): TurboModulesFactory {
return new CalculatorModulesFactory(ctx);
}
}
4.将 Turbo Native Module 添加到 App,引入 Calculator TurboModule
打开 MyApp/harmony/entry/src/main/ets/RNPackageFactory.ts，添加：
import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts';
+ import {CalculatorPackage} from './CalculatorPackage'
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
+ new CalculatorPackage(ctx),
];
}
编译、运行即可。
5.JavaScript侧利用
以下是一个在 App.js 中调用 add 方法的例子：
App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from "react";
import { useState } from "react";
import type { Node } from "react";
import { SafeAreaView, StatusBar, Text, Button } from "react-native";
import RTNCalculator from "rtn-calculator/src/NativeCalculator.js";
const App: () => Node = () => {
const = useState<number | null>(null);
return (
<SafeAreaView>
<StatusBar barStyle={"dark-content"} />
<Text style={{ marginLeft: 20, marginTop: 20 }}>
3+7={result ?? "??"}
</Text>
<Button
title="Compute"
onPress={async () => {
const value = await RTNCalculator.add(3, 7);
setResult(value);
}}
/>
</SafeAreaView>
);
};
export default App;
如今，您可以运行 App 并查看在屏幕上显示的组件。
尾声：TurboModule自定义 ，它将TurboModule作为三方库来写的，方便打包为tgz,鸿蒙侧可以打包为har包。本文简化了构造结构，方便在项目中直接添加。
ohos_react_native: React Native鸿蒙化堆栈
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]