React Native Keyboard Controller 与 TextInputMask 的兼容性问题分析与解决方案

问题背景

在 React Native 生态系统中，键盘控制是一个常见的需求场景。react-native-keyboard-controller 作为一个优秀的键盘控制库，在 1.10.0 版本引入了一个新的 FocusedInputTextChangedEvent 功能后，被发现与 react-native-text-input-mask 库存在兼容性问题。

问题现象

当开发者同时使用这两个库时，会出现以下异常情况：

• 首次点击输入框时键盘无法正常弹出
• Android 平台下会抛出 ConcurrentModificationException 异常
• 问题仅在为 TextInputMask 组件设置 mask 属性时出现

技术分析

异常根源

这个问题的本质在于 Android 平台上的集合修改冲突。具体来说：

1. React Native 的 ReactEditText 组件在 afterTextChanged 回调中使用迭代器遍历监听器列表
2. react-native-text-input-mask 的 MaskedTextChangedListener 在每次文本变化时会执行移除和重新添加监听器的操作
3. 当监听器数量达到3个时（EmojiTextWatcher、MaskedTextChangedListener 和 RNKC 的监听器），就会触发 Java 的 ConcurrentModificationException

底层机制

在 Java 集合框架中，ArrayList 的迭代器实现采用了"快速失败"(fail-fast)机制。当检测到集合在迭代过程中被修改时，就会抛出 ConcurrentModificationException 异常。这是一种保护机制，防止在迭代过程中集合被意外修改导致不可预期的行为。

解决方案演进

初步尝试

开发者最初尝试了以下方法：

• 延迟添加监听器（100ms 或 1s 后）
• 调整监听器的添加顺序

但这些方案要么不能彻底解决问题，要么会引入新的异常。

深入解决方案

经过深入分析，提出了两种可行的技术方案：

1. 反射方案：

   • 使用反射机制强制修改监听器列表的顺序
   • 将 RNKC 的监听器插入到 MaskedTextChangedListener 之前
   • 优点：兼容现有 RN 版本
   • 缺点：反射通常被视为最后手段

2. 修改 React Native 源码：

   • 改变 ReactEditText 的迭代方式
   • 使用索引遍历而非迭代器遍历
   • 优点：从根本上解决问题
   • 缺点：需要等待新 RN 版本发布

最终实现

综合考虑后，项目维护者选择了反射方案作为临时解决方案，同时计划向 React Native 社区提交 PR 从根本上修复这个问题。这个方案在 1.10.2 版本中得到了实现，经测试验证能够有效解决问题。

开发者建议

对于遇到类似问题的开发者，可以采取以下措施：

1. 如果暂时不需要 FocusedInputTextChangedEvent 功能，可以回退到 1.9.5 版本
2. 升级到最新版 react-native-keyboard-controller 以获得修复
3. 关注 React Native 的更新，未来版本可能会内置更优雅的解决方案

技术启示

这个案例为我们提供了几个重要的技术启示：

1. Android 平台的集合修改规则需要特别注意
2. 第三方库间的交互可能产生意想不到的边界情况
3. 在保持兼容性和追求最佳方案之间需要权衡
4. 反射虽然强大，但应当谨慎使用

通过这个问题的分析和解决过程，不仅修复了一个具体的兼容性问题，也为 React Native 生态系统的稳定性做出了贡献。