React Native Reanimated：SharedValue存对象时withSpring失效问题

问题场景 #

我用React Native Reanimated 2的SharedValue存储盒子位置对象，结构为boxPositions.value = {[boxId]: {x: 0, y: 0}}，目标是给指定盒子的y属性应用withSpring()实现动画移动。

尝试第一种写法时，调用moveRandomBox()盒子完全不动：

const moveRandomBox = () => {
  const randId = Math.floor(Math.random() * boxes.length) + 1;
  boxPositions.value = {
    ...boxPositions.value,
    [randId]: {
      x: boxPositions.value[randId].x,
      y: withSpring(boxPositions.value[randId].y - 50)
    }
  };
}

但换成第二种写法，更新时直接给y设普通数值，在useAnimatedStyle里对y应用withSpring()，动画就能正常生效。由于实际场景需要根据不同更新场景用不同动画，希望用第一种方式实现。

失效原因 #

withSpring()是Reanimated提供的动画函数，它返回的是动画节点（Animated Node），这个节点必须在Reanimated的UI线程动画上下文中执行，才能被Reanimated的动画系统追踪并加入到更新循环里。

第一种写法中，moveRandomBox是在React的JS线程执行的普通函数，这里调用withSpring()生成的动画节点，只是被当作普通值存在了SharedValue的对象属性里，Reanimated无法识别这个节点需要执行动画——因为SharedValue更新的是整个对象，系统不会遍历对象内部去检测动画节点，自然不会触发动画流程。

而当直接在useAnimatedStyle里调用withSpring()时，这个函数是在Reanimated的UI线程上下文中运行的，动画节点会被自动注册到动画循环，所以能正常生效。

解决方案 #

把SharedValue的更新逻辑放到runOnUI包裹的函数中，让withSpring()在Reanimated的UI线程动画上下文里执行，这样生成的动画节点就能被系统正确追踪：

import { runOnUI } from 'react-native-reanimated';

const moveRandomBox = () => {
  const randId = Math.floor(Math.random() * boxes.length) + 1;
  // 将更新逻辑放到Reanimated UI线程上下文执行
  runOnUI(() => {
    boxPositions.value = {
      ...boxPositions.value,
      [randId]: {
        x: boxPositions.value[randId].x,
        y: withSpring(boxPositions.value[randId].y - 50)
      }
    };
  })();
}

如果场景更复杂，也可以考虑将每个盒子的位置单独存为SharedValue（比如const boxPositions = useSharedValue({ 1: useSharedValue({x:0, y:0}), ... })），这样每个位置的动画节点能被单独追踪，但会增加状态管理的复杂度。

内容的提问来源于stack exchange，提问作者Shnick