鸿蒙ArkTS与React Native JS双向通信实战教程

本文专注讲解鸿蒙ArkTS与React Native JS之间的双向通信原理和实战,涵盖从JS侧到ArkTS侧再到C++胶水层的完整链路。


总体架构理解

  • JS侧(React Native业务代码) :开发者日常写的JS/TS文件。
  • C++胶水层 :鸿蒙适配的桥接层,实现消息和数据的传递,配合TurboModule/JSI等机制。
  • ArkTS侧 :鸿蒙原生能力、页面、组件等实现,负责最终的业务落地。

通信流程简图如下:

scss 复制代码
JS (RN) <==> C++ (胶水层) <==> ArkTS (原生)

一、JS(RN)向ArkTS通信全流程

1.1 JS侧调用TurboModule

(1)声明TurboModule接口

typescript 复制代码
// src/specs/v2/NativeCalculator.ts
import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): Promise<number>;
}
export default TurboModuleRegistry.get<Spec>('RTNCalculator') as Spec | null;

(2)实际调用

javascript 复制代码
import { RTNCalculator } from 'rtn-calculator';

const result = await RTNCalculator.add(3, 7);
// result 应为 10,实际走到了原生

1.2 C++胶水代码实现TurboModule

(1)胶水头文件生成(示例)

cpp 复制代码
// generated/RTNCalculator.h
#pragma once
#include "RNOH/TurboModule.h"
namespace rnoh {
class RTNCalculator : public ArkTSTurboModule {
public:
  RTNCalculator(const Context ctx, const std::string name);
};
}

(2)实现方法与注册

cpp 复制代码
// generated/RTNCalculator.cpp
#include "RTNCalculator.h"
namespace rnoh {
RTNCalculator::RTNCalculator(const Context ctx, const std::string name): ArkTSTurboModule(ctx, name) {
  methodMap_ = {
    { "add", { 2, [](facebook::jsi::Runtime& rt, facebook::react::TurboModule& turboModule, const facebook::jsi::Value* args, size_t count) {
      // 直接转发到ArkTS
      return static_cast<ArkTSTurboModule&>(turboModule).callAsync(rt, "add", args, count);
    }}}
  };
}
}

说明: 这里等价于将参数转发到ArkTS侧,由ArkTS实现业务。

1.3 ArkTS侧实现能力

typescript 复制代码
// entry/src/main/ets/turbomodule/CalculatorModule.ts
import { TurboModule } from '@rnoh/react-native-openharmony/ts';
import { TM } from '@rnoh/react-native-openharmony/generated/ts';
export class CalculatorModule extends TurboModule implements TM.RTNCalculator.Spec {
  add(a: number, b: number): Promise<number> {
    return Promise.resolve(a + b);
  }
}

1.4 回传结果到JS侧

ArkTS实现Promise返回,C++胶水自动转成JS的Promise,JS拿到最终结果。


二、ArkTS向JS(RN)通信全流程

2.1 ArkTS侧向JS侧发事件(DeviceEventEmitter示例)

typescript 复制代码
// ArkTS侧
this.ctx.rnInstance.emitDeviceEvent("customEvent", { foo: 123 });

2.2 C++胶水代码转发事件

cpp 复制代码
// C++实现
// 对应 emitDeviceEvent 方法内部
void RNInstance::emitDeviceEvent(const std::string& eventName, const folly::dynamic& payload) {
  // 实际会通过 JSI 调用 JS 侧的 DeviceEventEmitter.emit
  // 伪代码示例:
  auto jsCallback = ...; // 得到JSEmit函数
  jsCallback(eventName, payload);
}

2.3 JS侧监听事件

javascript 复制代码
import { DeviceEventEmitter } from 'react-native';

DeviceEventEmitter.addListener('customEvent', (data) => {
  // data = { foo: 123 }
  // 这里处理ArkTS侧发来的消息
});

三、JS(RN)侧主动监听Native事件

同上,JS侧通过DeviceEventEmitter或TurboModule的回调接口监听原生主动推送过来的事件。


四、ArkTS与JS直接消息通信(消息总线机制)

ArkTS向C++侧发消息:

typescript 复制代码
// ArkTS
this.ctx.rnInstance.postMessageToCpp("SAMPLE_MESSAGE", { foo: "bar" });

C++胶水层Observer监听:

cpp 复制代码
class MyComponentInstance : public CppComponentInstance<...>, public ArkTSMessageHub::Observer {
public:
  MyComponentInstance(Context context)
    : CppComponentInstance(std::move(context)), ArkTSMessageHub::Observer(m_deps->arkTSMessageHub) {}
  void onMessageReceived(ArkTSMessage const& message) override {
    if (message.name == "SAMPLE_MESSAGE") {
      // 处理 message.payload
      // 可再通过 emitDeviceEvent 转发给 JS
    }
  }
};

C++向ArkTS侧发消息:

cpp 复制代码
m_deps->rnInstance.lock()->postMessageToArkTS("ANOTHER_MESSAGE", { key: "value" });

ArkTS侧监听C++消息:

typescript 复制代码
const unsubscribe = rnInstance.cppEventEmitter.subscribe("ANOTHER_MESSAGE", (value: object) => {
  // value = { key: "value" }
  unsubscribe();
});

五、核心要点总结

  • RN (JS) 与 ArkTS 之间通信,C++胶水层是桥梁,开发者主要关注两端API用法即可。
  • JS侧调用TurboModule方法 → C++胶水转发 → ArkTS实现能力 → Promise返回JS
  • ArkTS/Native侧发事件 → C++胶水转发 → DeviceEventEmitter/事件总线 → JS侧监听响应
  • 消息总线机制支持双向自定义事件/消息传递,适合复杂场景。

结语

只要理解"一切通信必经C++胶水层",并用好TurboModule/DeviceEventEmitter/消息总线,鸿蒙ArkTS与React Native JS的双端通信就会变得非常清晰、简单!

相关推荐
贵沫末17 分钟前
React——基础
前端·react.js·前端框架
摸鱼仙人~7 小时前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
三水气象台18 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
杨进军1 天前
React 协调器 render 阶段
前端·react.js·前端框架
Codebee1 天前
50行代码搞定OneCode摄像头插件:快速定制实战指南
前端框架·开源·ecmascript 6
杨进军1 天前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
上单带刀不带妹1 天前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军1 天前
React 创建根节点 createRoot
前端·react.js·前端框架
vim怎么退出1 天前
万字长文带你了解微前端架构
前端·微服务·前端框架
Codebee2 天前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架