js给native发消息

js 给 native 发消息需要用到TurboModule模块，如果您想实现自己的 TurboModule，可以参考自定义TurboModule。

native给js发消息

DeviceEventEmitter

ArkTS调用

native 给 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 => {
     // 添加事件处理
   });
   

CPP调用

C++ 组件可以使用 TurboModule::emitDeviceEvent 发送事件。

例如发送一个 onAnimatedValueUpdate 事件，内有两个名为 "tag"、"value" 的属性。

setProperty 方法包括了三个参数，分别是：

• runtime：facebook::jsi::Runtime对象。
• tag：属性名。
• value：属性值。

this->emitDeviceEvent(
  rt,
  "onAnimatedValueUpdate",
  [tag, value](jsi::Runtime& rt, std::vector<jsi::Value>& args) {
    auto payload = jsi::Object(rt);
    payload.setProperty(rt, "tag", tag);
    payload.setProperty(rt, "value", value);
    args.push_back(std::move(payload));
  });    

emitComponentEvent

除了 DeviceEventEmitter 之外，还可以使用 emitComponentEvent 完成。

ArkTS调用

this.ctx.rnInstance.emitComponentEvent(tag: Tag, eventName: string, payload: any)

该方法包括了三个参数，分别是：

• tag：节点。
• eventName：调用的方法名。
• payload：需要传的参数。

CPP调用

C++ 组件可以使用继承父类 CppComponentInstance 的成员 m_eventEmitter 发送事件。

例如发送一个 load 事件，附带一个名为 "source" 的对象：
"source" 内有三个名为 "width"、"height"、"uri" 的属性；

setProperty 方法包括了三个参数，分别是：

• runtime：facebook::jsi::Runtime对象。
• name：属性名。
• value：属性值。

m_eventEmitter->dispatchEvent("load", [=](facebook::jsi::Runtime& runtime) {
  auto payload = facebook::jsi::Object(runtime);
  auto source = facebook::jsi::Object(runtime);
  source.setProperty(runtime, "width", width);
  source.setProperty(runtime, "height", height);
  source.setProperty(runtime, "uri", uri.c_str());
  return payload;
});

callRNFunction

除了 DeviceEventEmitter 之外，还可以使用 callRNFunction 完成。

ArkTS调用

this.ctx.rnInstance.callRNFunction(moduleName: string, functionName: string, args: unknown[]): void;

该方法包括了三个参数，分别是：

• moduleName：调用的模块名。
• functionName：调用的模块的方法名。
• args：需要传的参数。

CPP调用

C++ 可调用 RNInstance 类中封装的 callJSFunction 函数即可消息至 js（部分版本中为callJSFunction）。

instance->callJSFunction("JSTimers", "callTimers", std::move(getObject(id)));