React Native Keyboard Controller 在 Android Fabric 架构下的 ANR 问题分析与解决方案

问题背景

在 React Native 生态系统中，键盘交互一直是开发者面临的挑战之一。React Native Keyboard Controller 作为一个专注于优化键盘交互的库，在 Android 平台 Fabric 架构下出现了一个值得关注的应用无响应(ANR)问题。这个问题主要发生在用户与文本输入框(TextInput)交互时，特别是在结合 Reanimated 动画库使用时更为明显。

问题现象

开发者报告在使用 React Native Keyboard Controller 时，当用户点击文本输入框获取焦点时，应用会出现冻结现象。通过分析 ANR 日志，可以观察到以下关键调用栈特征：

1. 事件从 Fabric 事件分发器开始
2. 经过 Keyboard Controller 的事件拦截和转发
3. 最终在 Reanimated 的 NativeProxy 执行操作时出现阻塞

技术分析

根本原因

这个问题本质上是一个线程死锁问题，源于 React Native 新架构(Fabric)下多个线程间的同步操作。具体表现为：

1. Keyboard Controller 会拦截 TextInput 的焦点和失焦事件
2. 这些事件被转发到 JavaScript 线程处理
3. 当同时有 Reanimated 的动画操作时，UI 线程和 JavaScript 线程之间产生了相互等待

涉及的技术组件

• Fabric 渲染器：React Native 的新架构，采用多线程模型
• Reanimated：提供高性能动画的库，使用独立的 UI 线程
• Keyboard Controller：负责键盘相关事件的监听和转发

解决方案

临时解决方案

对于使用 React Native 0.76 及以下版本的项目，可以通过以下步骤解决：

1. 从源码构建 React Native
2. 启用 allowRecursiveCommitsWithSynchronousMountOnAndroid 标志
3. 这个标志允许在 Android 平台上进行同步挂载的递归提交

长期解决方案

React Native 0.77 及以上版本已经默认启用了上述标志，因此升级到这些版本可以永久解决此问题。对于使用 Expo 的项目：

1. 确保使用 Expo SDK 52 或更高版本
2. 将 react-native 依赖更新至 0.76.6 或更高
3. 或者暂时禁用新架构，等待兼容的 Expo SDK 发布

最佳实践建议

1. 版本管理：保持 React Native 和相关库的最新稳定版本
2. 性能监控：在生产环境中实施 ANR 监控，及时发现类似问题
3. 架构理解：深入理解 Fabric 架构的多线程模型，避免跨线程阻塞操作
4. 测试策略：在涉及键盘交互的页面进行充分的压力测试

总结

React Native Keyboard Controller 在 Android Fabric 架构下的 ANR 问题是一个典型的多线程同步问题。通过理解底层机制和采用适当的解决方案，开发者可以确保应用在提供丰富键盘交互体验的同时保持流畅性。随着 React Native 生态的不断演进，这类问题将得到更好的原生支持，但掌握其原理对于开发高质量应用仍然至关重要。