React Native Screens 中 Android 屏幕过渡动画卡顿问题分析与解决方案

问题背景

在 React Native Screens 3.30.1 版本中，Android 平台上的原生堆栈导航器（createNativeStackNavigator）出现了明显的屏幕过渡动画卡顿问题。当用户从一个屏幕导航到另一个屏幕时，前一个屏幕会出现明显的延迟和卡顿现象。

问题表现

具体表现为：

• 在 3.30.1 版本中，屏幕过渡动画有约 450 毫秒的明显延迟
• 回退到 3.29.0 版本后，延迟缩短到约 80 毫秒，卡顿感明显减轻
• 问题主要出现在 DEFAULT、FADE 和 NONE 这三种堆栈动画类型上

技术分析

经过开发团队的深入调查，发现问题根源在于 Android 平台上的动画实现方式：

1. 动画持续时间设置：3.30.1 版本中引入了较长的动画持续时间（450ms），这直接导致了用户感知到的卡顿

2. 动画事件处理机制：系统在处理屏幕过渡动画时，对于默认动画类型的处理不够优化

3. Fragment 过渡机制：Android 原生的 Fragment 过渡动画与 React Native Screens 的自定义动画实现之间存在协调问题

解决方案

开发团队提出了以下改进方案：

1. 恢复系统默认动画：对于 DEFAULT、FADE 和 NONE 这三种动画类型，改用 Android 系统原生的 Fragment 过渡动画

2. 优化动画事件处理：通过重写 onCreateAnimator 方法，为系统动画添加适当的事件监听器

3. 保留自定义动画：对于 SLIDE_FROM_RIGHT 等自定义动画类型，仍保持原有的实现方式

实现细节

核心修改包括：

1. 在 ScreenStack.kt 中，将 DEFAULT、FADE 和 NONE 动画类型的实现改为使用 FragmentTransaction 的标准过渡效果

2. 在 ScreenStackFragment.kt 中添加 onCreateAnimator 方法，专门处理系统动画的事件监听

3. 移除了冗余的自定义动画 XML 资源文件，简化项目结构

开发者建议

对于遇到类似问题的开发者，建议：

1. 升级到修复后的版本（4.0.0 及以上）

2. 如果暂时无法升级，可以使用 patch-package 应用修复补丁

3. 考虑使用 FADE 动画替代默认的 PUSH 动画，在某些场景下可能有更好的性能表现

总结

React Native Screens 作为 React Native 生态中重要的导航组件，其性能优化对于应用用户体验至关重要。这次 Android 平台上的动画卡顿问题修复，体现了开发团队对性能细节的关注，也为开发者提供了更流畅的导航体验。通过回归系统原生动画实现，既保证了性能，又保持了与 Android 设计规范的一致性。