HarmonyOS 鸿蒙Next:如何让RN的项目调用到鸿蒙的方法
HarmonyOS 鸿蒙Next:如何让RN的项目调用到鸿蒙的方法 如何让RN的项目调用到鸿蒙的方法
js给native发消息
需要用到TurboModule模块,它可以通过React Native的「Bridge」帮助JavaScript和原生代码进行交互,并使用跨平台的数据格式 JSON 进行通讯,参考demo如下:
// 1. 通过TurboModuleRegistry的getEnforcing方法在js侧定义TurboModule。注意,代码中必须要输出TurboModuleRegistrySpec对象。
// SampleProject\MainProject\src\bundles\basic\SampleTurboModule.tsx
import { TurboModule, TurboModuleRegistry } from "react-native";
// 自定义的TurboModules
export interface SpecSampleTurboModule extends TurboModule {
pushStringToHarmony(arg: string ,id?: number): string;
registerFunction(onComplete: (value: string) => void): void;
doAsyncJob(shouldResolve: boolean): Promise<string>;
rnLog(info: string): void;
}
export default TurboModuleRegistry.getEnforcing<SpecSampleTurboModule>
('SampleTurboModule');
// 2. 使用 Codegen 或自行实现CPP层的胶水代码。
generated
├── RNOHGeneratedPackage.h
├── SpecSampleTurboModule.cpp
└── SpecSampleTurboModule.h
// 3. 在React的代码中引入SampleTurboModule,并调用SampleTurboModule暴露的方法,如registerFunction方法。
import SampleTurboModule from '../basic/SampleTurboModule';
...
SampleTurboModule.registerFunction((value) => {
// 代码的实现逻辑
});
// 4. 实现SampleTurboModule的原生侧代码。
import { TurboModule } from '@rnoh/react-native-openharmony/ts';
export interface TurboModuleEventData {
param: string
}
export class SampleTurboModule extends TurboModule {
registerFunction(onComplete: (value: string) => void): void {
console.log(`RNOH SampleTurboModule::registerFunction + trigger`);
setTimeout(() => {
onComplete?('... from native side');
}, 1000);
}
...
// 其余方法的实现
}
native给js发消息
DeviceEventEmitter native给js侧发消息,可以通过DeviceEventEmitter发送事件到js侧来实现的。包括两个部分,分别是native侧 发送事件,以及js侧监听事件。
// 1. native侧发送事件 开发者可以通过调用RNInstance中的emitDeviceEvent,向js侧发送自定义的事件。第一个参数是事件的名称,第二个参数是事件发送的数据。
// SampleApp\entry\src\main\ets\customView\MarqueeView.ets
this.ctx.rnInstance.emitDeviceEvent("clickMarqueeEvent", { params: { age: 18 } })
// 2、 js侧监听事件 开发者需要在js代码中添加对应事件的监听与处理。
DeviceEventEmitter.addListener('clickMarqueeEvent', e => {
// 添加事件处理
});
//callRNFunction
//除了DeviceEventEmitter之外,还可以使用callRNFunction完成。
this.ctx.rnInstance.callRNFunction(moduleName: string, functionName: string, args: unknown[]): void;
//该方法包括了三个参数,分别是
//moduleName:调用的模块名
//functionName:调用的模块的方法名
//args:需要传的参数
更多关于HarmonyOS 鸿蒙Next:如何让RN的项目调用到鸿蒙的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
就是卡到这里了,兄弟,有demo吗,我们项目里面用了三方库,如Lottie,这个库里面一直报错,找不到native的注册方法,不知道咋写了
在HarmonyOS(鸿蒙)系统中,要让React Native(RN)项目调用到鸿蒙的方法,通常需要通过鸿蒙提供的原生模块接口(Native Module)来实现。以下是简要步骤:
-
创建鸿蒙原生模块:首先,在鸿蒙项目中创建一个原生模块,该模块需要继承鸿蒙的特定类(如
Ability
或自定义的服务类),并实现需要暴露给RN的方法。 -
编写JNI接口:鸿蒙系统虽然与Android系统架构不同,但为了实现与RN的通信,你可能需要编写类似于JNI(Java Native Interface)的接口,这里是指鸿蒙与JavaScript之间的桥梁。鸿蒙提供了相应的机制来调用原生代码,具体实现需参考鸿蒙开发文档。
-
集成到RN项目:在RN项目中,通过
react-native link
命令(或手动配置)将鸿蒙原生模块集成进来。由于鸿蒙与RN的集成不是官方直接支持的场景,可能需要自定义一些桥接逻辑。 -
调用原生方法:在RN的JavaScript代码中,通过
NativeModules
导入并使用你定义的原生模块及其方法。
请注意,由于鸿蒙系统与RN的集成并非官方标准流程,上述步骤可能需要根据鸿蒙系统的具体版本和API进行调整。此外,鸿蒙系统的开发工具和文档可能不断更新,建议直接参考最新的鸿蒙开发文档进行实现。
如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html