HarmonyOS 鸿蒙Next Ecosystem Solution ReactNative 4.1.0.400 套件文档未找到鸿蒙原生与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);
}
···
// 其余⽅法的实现
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

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：需要传的参数