HarmonyOS鸿蒙Next中实现RN与鸿蒙交互能力示例代码

HarmonyOS鸿蒙Next中实现RN与鸿蒙交互能力示例代码

介绍

本示例是一个RN相关场景的示例，搭建了不同的页面向用户提供不同RN适配鸿蒙的使用场景。用于在应用程序中显示RN页面内容，为开发者提供RN与鸿蒙交互、Rn Webview加载本地页面等能力。

实现RN与鸿蒙交互能力源码链接

效果预览

图片名称

使用说明

本示例运行需搭建RN开发环境，请根据文档 进行环境搭建，否则会导致运行失败；

环境搭建完成后，执行如下操作即可运行本示例：

在RnDemos目录下执行如下命令：

npm install  -- 安装rn相关依赖；

RN工程安装完依赖后，使用DevEco打开ReDemos/harmony鸿蒙应用工程，并执行sync同步依赖

在RnDemos目录下执行如下命令：

npm run dev  -- 生成CodeGen代码和bundle文件

执行完后会在ReDemos/harmony鸿蒙应用工程中生成codegen胶水代码。

实现思路

RN桥接鸿蒙组件方式

  1. 使用CodeGen生成桥接代码。源码参考RnDemos中的MarqueeView.tsx。
export type OnStopEventData = Readonly<{
    isStop: boolean,
    type: string,
}>;

export interface MarqueeViewProps extends ViewProps {
    src: string,
    onStop?: DirectEventHandler<OnStopEventData>;
}

export default codegenNativeComponent<
    MarqueeViewProps
>('MarqueeView')
as HostComponent<MarqueeViewProps>;
  1. 鸿蒙侧实现：Descriptor的功能是封装RN侧组件代码传递到ArkUI组件的参数，MarqueeView对RN侧公开了一个src参数，用于显示跑马灯的滚动内容。鸿蒙侧定义MarqueeViewDescriptor代码如下。
export interface MarqueeViewProps extends ViewBaseProps {
  src: string
}

export type MarqueeViewDescriptor = Descriptor<"MarqueeView", MarqueeViewProps>;
  1. RN侧使用鸿蒙组件页面可以和其他标准组件的创建方式一样，在组件容器内添加MarqueeView标签。
<MarqueeView
    src="双十一大促，消费是社会再生产过程中的一个重要环节，也是最终环节。它是指利用社会产品来满足人们各种需要的过程。"
    ref={nativeRef}
    style={{height: 180, width: '100%', backgroundColor: '#1980E6'}}
    onStop={(e) => {
        console.log('native调用了RN的 onStop，isStop = ' + e.nativeEvent.isStop);
        setMarqueeStop(e.nativeEvent.isStop);
    }}
/>

两端调用方式（Rn与鸿蒙通信）

  1. 调用RNInstance中的emitDeviceEvent，向js侧发送自定义的事件。第一个参数是事件的名称，第二个参数是事件发送的数据。
this.ctx.rnInstance.emitDeviceEvent("clickMarqueeEvent", { params: { age: 18 } })
  1. 在js代码中添加对应事件的监听与处理。
DeviceEventEmitter.addListener('clickMarqueeEvent', (e) => {
    // 添加事件处理
});

RN webview加载本地H5资源

  1. 使用Resource://rawfile文件加载本地页面，同时开启相关参数，以便webview能正常加载css以及js等资源文件
使用Resource://rawfile文件加载本地页面，同时开启相关参数，以便webview能正常加载css以及js等资源文件

更多关于HarmonyOS鸿蒙Next中实现RN与鸿蒙交互能力示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，RN与鸿蒙交互主要使用@ohos/hybrid模块。示例代码：

// RN侧
import { NativeModules } from 'react-native';
NativeModules.HarmonyModule.callNativeMethod('param');

// 鸿蒙侧
import hybrid from '@ohos/hybrid';
export default class HarmonyModule {
  callNativeMethod(param: string) {
    hybrid.call('rnCallback', {data: 'response'});
  }
}

需在module.json5配置abilities的hybrid能力。交互通过JSON数据格式传递，支持Promise异步回调。

更多关于HarmonyOS鸿蒙Next中实现RN与鸿蒙交互能力示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个很好的HarmonyOS Next与React Native集成的示例。从代码来看，主要实现了三种交互方式：

  1. RN桥接鸿蒙组件：
  • 使用codegenNativeComponent生成桥接代码
  • 鸿蒙侧通过Descriptor封装参数传递
  • RN侧可以直接使用MarqueeView组件标签
  1. 两端通信：
  • 鸿蒙侧通过emitDeviceEvent发送事件
  • RN侧通过DeviceEventEmitter监听处理事件
  1. RN WebView加载本地资源：
  • 使用Resource://rawfile路径加载本地H5
  • 需要配置相关参数确保资源加载正常

这个示例展示了HarmonyOS Next与React Native的深度集成能力，开发者可以复用现有的React Native组件和生态，同时又能调用鸿蒙原生能力。代码结构清晰，实现方式规范，是很好的参考实现。

回到顶部