React Native Keyboard Controller 在 Android 9 上的模态框崩溃问题分析

在 React Native 生态系统中，键盘处理一直是一个具有挑战性的问题。react-native-keyboard-controller 作为一款专门解决键盘交互问题的库，为开发者提供了更流畅的键盘控制体验。然而，在特定 Android 版本上，该库与 React Native 的 Modal 组件结合使用时可能会出现崩溃问题。

问题现象

开发者在 Android 9 设备上发现，当应用中包含 KeyboardController 组件时，尝试打开 React Native 的 Modal 会导致应用崩溃。错误日志显示关键信息："folly::toJson: JSON object value was an INF when serializing value at 'progress'"，这表明在序列化动画进度值时遇到了无限大(INF)数值。

技术背景

这个问题涉及到几个关键技术点：

1. 动画系统集成：react-native-keyboard-controller 使用 Reanimated 库来处理键盘动画，通过 progress 属性来跟踪键盘动画的进度状态。

2. Android 窗口系统：在 Android 9 及以下版本中，窗口动画系统的实现与较新版本有所不同，特别是在处理 WindowInsets 动画时。

3. 序列化限制：JavaScript 与原生代码通信时，数值需要被序列化为 JSON，而 Infinity 不是一个合法的 JSON 数值。

问题根源

经过深入分析，发现问题出现在以下环节：

1. 当 Modal 打开时，Android 系统会触发窗口布局变化，这会导致 WindowInsets 动画的开始。

2. 在某些情况下（特别是在 Android 9 上），动画系统可能会计算出无限大的 progress 值。

3. 当这个无限大值尝试通过桥接传递给 JavaScript 时，序列化过程失败，导致应用崩溃。

解决方案

开发团队通过以下方式解决了这个问题：

1. 数值检查：在将 progress 值传递给 JavaScript 之前，添加了对 Infinity 的检查。如果检测到无限大值，则将其替换为 0。

2. 防御性编程：在整个动画处理流程中添加了更多的错误处理逻辑，确保异常情况不会导致应用崩溃。

3. 兼容性处理：针对不同 Android 版本的特殊行为进行了适配，确保在各种设备上都能稳定运行。

最佳实践建议

对于使用 react-native-keyboard-controller 的开发者，建议：

1. 确保使用最新版本的库（1.15.2 或更高），其中包含了这个问题的修复。

2. 在开发过程中，特别是在处理键盘交互和模态框时，应在各种 Android 版本上进行充分测试。

3. 如果遇到类似问题，可以考虑暂时禁用键盘控制器组件作为临时解决方案。

4. 关注库的更新日志，及时获取最新的稳定性改进。

总结

这个案例展示了 React Native 生态系统中常见的跨平台兼容性问题。通过深入理解底层机制和添加适当的防御性代码，可以有效提高应用的稳定性。react-native-keyboard-controller 团队通过快速响应和修复，为社区贡献了一个更健壮的解决方案。