HarmonyOS 鸿蒙Next RN模式中TurboModule组件怎么向JS发送事件
HarmonyOS 鸿蒙Next RN模式中TurboModule组件怎么向JS发送事件 我需要使用NativeEventEmitter在js测监听原生发送的事件和内容。查看了资料,未找到对应接口和示例代码
参考:js给native发消息 js给native发消息需要使用TurboModule模块,它可以通过React Native的「Bridge」帮助JavaScript和原生代码进行交互,并使用跨平台的数据格式JSON进行通讯。下面以Demo中的SampleTurboModule为例,介绍js给Native发消息的流程。
通过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');
使用Codegen或自行实现CPP层的胶水代码。
generated
├── RNOHGeneratedPackage.h
├── SpecSampleTurboModule.cpp
└── SpecSampleTurboModule.h
在React的代码中引入SampleTurboModule,并调用SampleTurboModule暴露的方法,如registerFunction方法。
import SampleTurboModule from '../basic/SampleTurboModule';
...
SampleTurboModule.registerFunction((value) => {
// 代码的实现逻辑
});
...
实现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侧监听事件。介绍Native给js发消息的流程。
native侧发送事件 可以通过调用RNInstance中的emitDeviceEvent,向js侧发送自定义的事件。第一个参数是事件的名称,第二个参数是事件发送的数据。
// SampleApp\entry\src\main\ets\customView\MarqueeView.ets
this.ctx.rnInstance.emitDeviceEvent("clickMarqueeEvent", { params: { age: 18 } })
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模式中TurboModule组件怎么向JS发送事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next RN(React Native)模式中,TurboModule组件向JS发送事件通常涉及事件桥接机制。以下是如何实现这一功能的基本步骤:
-
定义事件: 在TurboModule中,首先需要定义一个事件。这通常是通过在模块接口中声明一个事件名称来完成的。
-
触发事件: 当特定条件满足时(例如,数据更新、用户交互等),在TurboModule中使用相应的方法触发该事件。触发事件时,可以传递相关数据作为事件参数。
-
事件监听: 在JS端,使用相应的API监听从TurboModule发送的事件。当事件被触发时,JS端的监听器将被调用,并可以处理传递过来的数据。
-
数据传递: 事件触发时传递的数据可以是基本数据类型、对象或数组等。确保数据格式在TurboModule和JS端之间保持一致,以便正确解析和处理。
-
同步与异步: 根据需求,事件发送可以是同步或异步的。异步事件发送通常用于不涉及即时UI更新的后台任务,而同步事件发送则用于需要即时反馈的场景。
如果上述步骤无法完全解决你的问题,或者你在实现过程中遇到具体的技术难题,请联系官网客服。官网地址是:https://www.itying.com/category-93-b0.html