本文原创发布在华为开发者社区，更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。

介绍

本示例是一个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>;

2. 鸿蒙侧实现：Descriptor的功能是封装RN侧组件代码传递到ArkUI组件的参数，MarqueeView对RN侧公开了一个src参数，用于显示跑马灯的滚动内容。鸿蒙侧定义MarqueeViewDescriptor代码如下。

export interface MarqueeViewProps extends ViewBaseProps {
  src: string
}

export type MarqueeViewDescriptor = Descriptor<"MarqueeView", MarqueeViewProps>;

3. 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 } })

2. 在js代码中添加对应事件的监听与处理。

DeviceEventEmitter.addListener('clickMarqueeEvent', e => {
    // 添加事件处理
  });

RN webview加载本地H5资源

1. ​使用CodeGen生成桥接代码。源码参考RnDemos中的MarqueeView.tsx。

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