React Native Reanimated 中 enableFreeze 模式下 SharedValue 重置问题解析

问题背景

在 React Native 应用开发中，使用 react-native-reanimated 库的 enableFreeze 功能时，开发者可能会遇到一个特殊现象：当在底部标签导航器(tab navigator)的不同屏幕间切换时，useSharedValue 的值会被重置为初始值，而不是保持之前修改后的状态。

问题现象

具体表现为：

1. 在 FirstScreen 中，某个动画宽度从初始值 100 动画变化到 300
2. 切换到 SecondScreen
3. 返回 FirstScreen 时，宽度值被重置回初始值 100
4. 这种现象仅在 iOS 平台且启用新架构(Fabric)时出现

技术分析

enableFreeze 的工作原理

enableFreeze 是 react-native-screens 提供的一个优化功能，它通过"冻结"非活动屏幕来提升性能。当屏幕被冻结时，其 JavaScript 执行会被暂停，但视图层次结构会保留在内存中。

SharedValue 的预期行为

useSharedValue 是 Reanimated 提供的响应式值，设计上应该：

• 在组件生命周期内保持其状态
• 即使组件暂时不可见(如被导航器隐藏)也应保留值
• 只在组件卸载时才重置

问题根源

在 React Native 0.76.2 版本和 Reanimated 3.16.1 版本中，当启用新架构(Fabric)和 enableFreeze 时，存在一个桥接模式(bridgeless)下的兼容性问题。这导致 SharedValue 的状态在屏幕冻结/解冻过程中被错误地重置。

解决方案

该问题已在 Reanimated 3.17.2 版本中得到修复。主要改进包括：

1. 优化了 SharedValue 在冻结状态下的持久化机制
2. 修复了桥接模式下的状态管理逻辑
3. 确保组件在冻结/解冻过程中保持内部状态一致性

开发者建议

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

1. 升级到 Reanimated 3.17.2 或更高版本
2. 如果暂时无法升级，可考虑以下临时方案：
   • 禁用 enableFreeze
   • 使用旧架构(非Fabric)
   • 通过全局状态管理共享动画值

技术启示

这个问题揭示了 React Native 生态系统中几个重要概念之间的交互：

1. 导航器状态管理与组件生命周期
2. 性能优化功能(如冻结)与状态保持的平衡
3. 新架构迁移过程中可能出现的边缘情况

理解这些底层机制有助于开发者在遇到类似问题时更快定位原因并找到解决方案。