HarmonyOS 鸿蒙Next：React Native和鸿蒙如何相互调用

HarmonyOS 鸿蒙Next：React Native和鸿蒙如何相互调用 项目中有一部分功能时通过React Native实现的。
React Native会打成bundle文件的形式提供给鸿蒙、安卓、IOS端加载并相互。

鸿蒙与RN如何进行相互通信呢？
比如下面的安卓端代码，有提供@ReactMethod方法供RN端调用

import androidx.annotation.NonNull;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.lixiaoyun.aike.utils.aliyunLogUtils.HandlePostLog;

public class LXRNAliLog extends ReactContextBaseJavaModule {

  private ReactApplicationContext context;

  public LXRNAliLog(ReactApplicationContext reactContext) {
    super(reactContext);
    context = reactContext;
  }
}

@Override
public String getName() {
  return "LXRNAliLog";
}

@ReactMethod
public void addLogEventType(String eventType, String msg, String topic) {
  HandlePostLog.INSTANCE.postLogBaseTopic(topic, eventType, msg, 0);
}

@ReactMethod
public void addNoOffLogEventType(String eventType, String msg, String topic) {
  HandlePostLog.INSTANCE.postNoOffLogBaseTopic(topic, eventType, msg, 0);
}

更多关于HarmonyOS 鸿蒙Next：React Native和鸿蒙如何相互调用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以使用 emit
RN侧

DeviceEventEmitter.addListener('clickMarqueeEvent', e => {
  setNativeEmitterParam(JSON.stringify(e.params.age));
});

鸿蒙侧

.onTouch(() => { // 通过emit方式发送消息给rn侧调用rn的方法
  this.ctx.rnInstance.emitDeviceEvent("clickMarqueeEvent", { params: { age: 18 } })
})

或者可以参考对应文档里面的TurboModule

更多关于HarmonyOS 鸿蒙Next：React Native和鸿蒙如何相互调用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next中，React Native与鸿蒙的相互调用主要通过鸿蒙提供的JS桥接机制和原生模块接口实现。

React Native作为前端框架，其JavaScript代码运行在鸿蒙系统的JS引擎上。鸿蒙系统提供了一系列API，允许JavaScript代码调用原生（Native）模块，这些原生模块可以用鸿蒙的ArkTS（ArkUI的TypeScript扩展）或其他支持的语言编写。

在鸿蒙中，你可以创建原生模块，并在其中定义需要暴露给React Native的接口。这些接口可以通过鸿蒙的JS桥接机制被React Native的JavaScript代码调用。同样，React Native也可以通过事件或回调机制，将消息传递给鸿蒙的原生模块，实现双向通信。

具体实现时，你需要：

  1. 在鸿蒙项目中创建原生模块，并定义接口。
  2. 在React Native项目中引入鸿蒙提供的JS桥接库，并调用原生模块接口。
  3. 处理React Native到鸿蒙原生模块的通信，以及鸿蒙原生模块到React Native的回调。

这种机制使得React Native开发者能够在鸿蒙系统上开发高性能、原生体验的应用，同时复用React Native的跨平台代码。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部