HarmonyOS 如何让RN的项目调用到HarmonyOS的方法

HarmonyOS
7天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

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发消息

DeviceEventEmitternative给js侧发消息,可以通过DeviceEventEmitter发送事件到js侧来实现的。包括两个部分,分别是native侧发送事件,以及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:需要传的参数
分享
微博
QQ
微信
回复
7天前
相关问题
HarmonyOS 启动rn项目时报错
69浏览 • 1回复 待解决
HarmonyOS NAPI调用ArkTS静态方法
577浏览 • 1回复 待解决
HarmonyOS js调用webview中方法
478浏览 • 1回复 待解决
HarmonyOS RN开发指导版本项目编译失败
216浏览 • 1回复 待解决
HarmonyOS调用子组件方法
425浏览 • 1回复 待解决
RTOS在什么项目用到呀?
6911浏览 • 3回复 待解决
HarmonyOS通过方法调用loading有吗?
420浏览 • 0回复 待解决
IDE升级 RN项目起不来
1045浏览 • 1回复 待解决
HarmonyOS RNDebugger工具连不上
170浏览 • 1回复 待解决
HarmonyOS 创建RN实例问题
389浏览 • 1回复 待解决
HarmonyOS 数据类中方法无法被调用
272浏览 • 1回复 待解决
HarmonyOS如何接入RN页面?
141浏览 • 0回复 待解决
cocos引擎调用HarmonyOS系统方法
641浏览 • 1回复 待解决