OpenHarmony中React Native Alert组件的兼容性解决方案

1. 项目背景与需求解析

在OpenHarmony生态中集成React Native框架时，开发者经常面临原生组件与JavaScript组件交互的挑战。其中，Alert对话框作为最基础却高频使用的交互组件，其功能完整性和易用性直接影响开发效率。传统React Native的Alert组件在OpenHarmony环境下存在兼容性问题，特别是需要用户输入内容的场景（如登录框、表单验证）往往无法直接使用。

这个问题的核心在于：React Native的Alert模块底层依赖原生平台实现，而OpenHarmony的弹窗机制与Android/iOS存在差异。当调用Alert.prompt()时，在Android上能正常显示带输入框的弹窗，但在OpenHarmony上可能只会显示基础提示框。我曾在一个电商App项目中踩过这个坑——支付密码输入场景下，Android端运行完美的代码在OpenHarmony设备上直接报错。

2. 技术方案设计与选型

2.1 现有方案对比分析

通过实测发现，OpenHarmony 3.2 LTS版本中，React Native 0.71版本的Alert组件存在以下限制：

1. Alert.alert() 基础功能可用（仅显示文本+按钮）
2. Alert.prompt() 完全不可用（无输入框支持）
3. 第三方弹窗库（如react-native-popup-dialog）存在样式兼容问题

2.2 定制化解决方案

经过多次验证，最终采用分层实现方案：

javascript复制// 核心架构
+---------------------+
|   JavaScript层      |  // 保持React Native调用规范
|  (Alert.prompt API) |
+----------+----------+
           |
           v
+----------+----------+
|   Bridge适配层      |  // 处理平台差异逻辑
| (NativeModule通信)  |
+----------+----------+
           |
           v
+---------------------+
|   OpenHarmony原生层 |  // 实现TextInputDialog
| (ETS/ArkUI组件封装) |
+---------------------+

关键设计决策：

1. API兼容性：保持与官方Alert.prompt()完全一致的参数规范（title, message, callback等）
2. 性能优化：通过C++层实现JS与Native的高效通信，避免Java/ETS桥接的性能损耗
3. 样式统一：复用OpenHarmony的TextInputDialog组件，确保与系统风格一致

3. 具体实现步骤

3.1 原生模块开发（ETS侧）

在entry/src/main/ets/module目录下创建PromptDialog模块：

typescript复制// PromptDialog.ets
import prompt from '@ohos.promptA