React Native跨平台弹窗组件开发实践

1. 跨平台弹窗组件的技术选型思考

在移动端开发中，确认取消弹窗是最基础却最常用的交互组件之一。最近我在一个需要同时支持Android、iOS和OpenHarmony平台的项目中，遇到了一个有趣的挑战：如何在React Native框架下实现一套适配OpenHarmony系统的模态弹窗。这个需求看似简单，却涉及到了JavaScript与原生平台的深度交互。

传统React Native项目中使用Alert组件或第三方弹窗库（如react-native-modal）在Android/iOS上运行良好，但OpenHarmony作为新兴操作系统，其架构设计与Android有本质区别。经过多次技术验证，最终我们采用了基于React Native的Native Modules机制，结合OpenHarmony的ArkUI框架，实现了真正跨三端的统一弹窗解决方案。

2. 核心架构设计与实现原理

2.1 技术栈分层结构

整个方案采用分层架构设计：

code复制JavaScript层(React组件)
↓
React Native Bridge
↓
Native Modules层(Android/iOS/OpenHarmony)
↓
各平台原生UI实现

关键点在于Native Modules层的平台适配。对于Android/iOS，我们沿用React Native标准的Native Module实现方式；对于OpenHarmony，则需要单独开发HarmonyOS的Native Module。

2.2 OpenHarmony侧原生实现

在OpenHarmony侧，我们需要创建自定义的Native Module。以下是核心代码结构：

typescript复制// harmony-native-module/src/main/ets/module/ModalModule.ets
import { UIAbility } from '@ohos.ability.UIAbility';
import { promptAction } from '@ohos.promptAction';

export default class ModalModule {
  showDialog(
    title: string,
    mess