React Native Reanimated 中 Pressable 在 ScrollView 内的点击失效问题解析

问题现象

在使用 React Native Reanimated 库时，开发者发现一个特定场景下的交互问题：当在 ScrollView 内部使用 Pressable 组件，并且页面中同时存在 Animated.View 组件时，在 Android 设备上滚动页面后，Pressable 组件的点击事件会失效。具体表现为：

• 滚动前按钮点击正常
• 滚动后按钮的涟漪效果(Ripple)可见，但 onPress 事件不会触发
• 仅影响 Android 平台
• 仅在使用新架构(Fabric)时出现

技术背景分析

这个问题涉及到 React Native 的多个核心机制：

1. Reanimated 动画系统：通过 useAnimatedStyle 创建动画样式，在 UI 线程执行动画
2. Fabric 渲染架构：React Native 的新渲染系统，直接与原生组件通信
3. 手势响应系统：处理触摸事件的传递和响应链

问题根源

经过深入调查，发现问题源于 React Native 核心的节点状态管理机制。具体来说：

1. 当使用 Animated.View 并应用动画样式时，会触发节点的克隆操作
2. 在 Fabric 架构下，克隆操作没有正确更新触摸事件相关的状态信息
3. 导致滚动后 Pressable 组件的点击区域(hitbox)计算错误
4. 虽然视觉上按钮可见，但系统认为触摸事件发生在按钮区域外

解决方案

目前有两种可行的解决方案：

临时解决方案

1. 使用 react-native-gesture-handler 中的 Pressable 替代方案

   • 注意：早期版本存在 android_ripple 颜色设置问题，已在 2.23.0 版本修复

2. 暂时禁用新架构(Fabric)

   • 这不是理想方案，会失去新架构的性能优势

根本解决方案

在 React Native 0.79.2 及以上版本中，可以通过设置以下 Gradle 属性来修复：

在 android/gradle.properties 文件中添加：

updateRuntimeNodeReferencesOnCommit=true
useNodeStateOnClone=true

这两个标志位会：

1. 强制在提交时更新节点引用
2. 在克隆操作时使用正确的节点状态
3. 确保触摸区域计算始终准确

开发者建议

1. 对于新项目，建议直接应用 Gradle 属性解决方案
2. 对于现有项目，评估是否可以使用 react-native-gesture-handler 的 Pressable
3. 关注 React Native 官方更新，这个问题预计会在未来版本中得到彻底修复
4. 在复杂动画场景中，建议进行充分的跨平台测试

总结

这个问题展示了 React Native 新架构下动画与交互的复杂性。理解底层机制有助于开发者更好地解决问题。随着 React Native 生态的不断成熟，这类边界情况问题会逐渐减少，但目前开发者仍需掌握这类问题的诊断和解决方法。