HarmonyOS 鸿蒙Next RN如何在鸿蒙上实现三方桥

具体通信说明请参考： 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](/user/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：需要传的参数