React Native Reanimated 数组共享值在反向动画中的问题解析

问题背景

在使用 React Native Reanimated 库时，开发者发现当共享值(SharedValue)包含数组类型数据时，使用 withRepeat 动画配合反向(reverse)参数会出现异常行为。具体表现为：动画能够正常正向执行，但在反向阶段无法正确回退到初始值。

问题现象

当开发者创建一个包含数字数组的共享值，并尝试使用 withRepeat 和 withTiming 组合实现往返动画时：

const arrayValue = useSharedValue([0]);

arrayValue.value = withRepeat(
  withTiming([30], { duration: 1000 }),
  2,
  true
);

预期行为是数值从 [0] 变化到 [30]，然后再返回 [0]。但实际观察到的却是数值只完成了正向变化，反向阶段没有执行。

技术分析

经过深入调试，发现问题根源在于 JavaScript 中数组的引用特性。在动画执行过程中：

1. 正向阶段，动画的 startValue 和 nextAnimation.current 被赋值为同一个数组引用
2. 由于数组是引用类型，这两个变量实际上指向内存中的同一个数组对象
3. 当动画尝试反向执行时，由于引用相同，无法正确区分初始值和目标值

相比之下，当使用基本类型(如数字)或对象时，由于每次赋值都会创建新的值/引用，动画能够正常执行往返效果。

解决方案

该问题已在最新版本中修复，修复方案主要包括：

1. 在动画执行过程中，确保对数组类型数据进行深拷贝
2. 避免 startValue 和 current 值共享同一个引用
3. 保持动画状态管理的独立性

开发者建议

对于需要使用数组类型共享值的场景，开发者可以：

1. 确保使用最新版本的 Reanimated 库
2. 对于复杂数据结构，考虑使用对象包装数组
3. 在关键动画节点添加日志，监控共享值的变化过程
4. 理解 JavaScript 中基本类型和引用类型的区别

总结

这个问题很好地展示了 JavaScript 中引用类型在状态管理中的潜在陷阱。React Native Reanimated 通过内部优化解决了这一问题，为开发者提供了更稳定的动画体验。理解这类问题的本质有助于开发者在复杂动画场景中避免类似问题。