# RnDemos

**Repository Path**: scenario-samples/rn-demos

## Basic Information

- **Project Name**: RnDemos
- **Description**: 【鸿蒙 Harmony Next 示例 代码】本示例是一个RN相关场景的示例，搭建了不同的页面向用户提供不同RN适配鸿蒙的使用场景。用于在应用程序中显示RN页面内容，为开发者提供RN与鸿蒙原生交互、Rn Webview加载本地页面等能力。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-03
- **Last Updated**: 2025-07-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RN相关场景Demo

## 介绍

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

## 效果预览图

<img src="./asserts/RnDemosExample.gif" style="zoom: 80%;" />

## 运行须知

本示例运行需搭建RN开发环境，请根据文档：https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md 进行环境搭建，否则会导致运行失败；

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

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

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

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

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

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

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

## 实现思路

RN桥接原生组件方式

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

```typescript
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`代码如下。源码可参考harmony下的MarqueeView.ets

```typescript
export interface MarqueeViewProps extends ViewBaseProps {
  src: string
}

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

	3. RN侧使用原生组件页面可以和其他标准组件的创建方式一样，在组件容器内添加`MarqueeView`标签。源码可参考AwesomeProject中的NativeComponent.tsx

```typescript
<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侧发送自定义的事件。第一个参数是事件的名称，第二个参数是事件发送的数据。

```typescript
this.ctx.rnInstance.emitDeviceEvent("clickMarqueeEvent", { params: { age: 18 } })
```

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

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

RN webview加载本地H5资源

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

```typescript
const source = {
        uri: 'resource://rawfile/webPage/luckyDraw/index.html', // 确保路径正确
};

<WebView
  source={source}
  javaScriptEnabled={true}
  allowFileAccess={true}
  domStorageEnabled={true}
/>
```

## 高性能知识点

不涉及

## 工程结构&模块类型

```
RnDemos                                        // RN项目
|---harmony                                    // 鸿蒙原生项目
|   |---entry                                  // 鸿蒙原生入口文件
|   |---libs                                   // 鸿蒙原生依赖包
|---views                                      // RN页面代码
|   |---MainPage.tsx                           // 主页面
|   |---MarqueeView.tsx                        // CodeGen生成桥接code代码
|   |---NativeComponent.tsx                    // 桥接鸿蒙原生代码
|   |---WebViewJsPage.tsx                      // Web veiw加载本地H5页面代码
|---App.tsx                                    // RN应用入口代码
```

## 模块依赖

RN三方库依赖：https://gitee.com/react-native-oh-library/usage-docs

###  参考资料

[RN环境搭建]: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md
[自定义组件]: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6.md
[两端通信]: https://gitee.com/openharmony-sig/ohos_react_native/blob/0.72.5-ohos-5.0-release/docs/zh-cn/%E4%B8%A4%E7%AB%AF%E9%80%9A%E8%AE%AF.md

## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">