鸿蒙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的双端通信就会变得非常清晰、简单!

相关推荐
我想说一句10 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
Dream耀10 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
每天开心14 小时前
噜噜旅游App(3)——打造个性化用户中心:AI生成头像与交互设计
前端·前端框架
WildBlue18 小时前
React 路由守卫:前端安全与控制的魔法钥匙 🗝️
前端·react.js·前端框架
OEC小胖胖18 小时前
渲染篇(一):从零实现一个“微型React”:Virtual DOM的真面目
前端·react.js·前端框架·web
德育处主任Pro18 小时前
『React』条件渲染的7种方法
前端·react.js·前端框架
前端工作日常1 天前
前端基建的幸存者偏差
前端·vue.js·前端框架
福娃B2 天前
【React】React 状态管理与组件通信:Zustand vs Redux📦
前端·react.js·前端框架
讨厌吃蛋黄酥2 天前
深度解析:useContext + useReducer — React官方状态管理的终极之道
javascript·react.js·前端框架
三月的一天2 天前
React+threejs两种3D多场景渲染方案
前端·react.js·前端框架