React Native Reanimated：是否该用useEffect监听props变化触发动画？

你的useEffect触发动画的方式是可行的，但Reanimated本身提供了更简洁的原生方案，无需依赖useEffect。

推荐方案：直接在useAnimatedStyle中使用Props #

可以直接在useAnimatedStyle的回调里读取props值，Reanimated会自动追踪props的变化并触发动画，不需要额外维护useSharedValue和useEffect：

export const SomeComponent = ({ top, left }) => {
  const animationStyle = useAnimatedStyle(() => {
    return {
      top: withTiming(top, { duration: 1000 }),
      left: withTiming(left, { duration: 1000 })
    };
  }, [top, left]); // 声明props为依赖，确保Reanimated能追踪到变化

  return <Animated.View style={[/* 你的基础样式 */, animationStyle]} />;
};

备选方案：使用useDerivedValue处理复杂逻辑 #

如果需要在动画前对props做额外转换或计算，可以用useDerivedValue响应props变化，再传递给动画：

export const SomeComponent = ({ top, left }) => {
  const targetPosition = useDerivedValue(() => {
    // 这里可以添加props的转换、过滤等逻辑
    return {
      top,
      left
    };
  }, [top, left]);

  const animationStyle = useAnimatedStyle(() => {
    return {
      top: withTiming(targetPosition.value.top, { duration: 1000 }),
      left: withTiming(targetPosition.value.left, { duration: 1000 })
    };
  });

  return <Animated.View style={[/* 你的基础样式 */, animationStyle]} />;
};

对你当前实现的说明 #

你用useEffect更新useSharedValue的方式是有效的，但存在两个小问题：

• 多了一层状态维护，代码冗余
• 若props频繁变化，useEffect的触发时序可能和Reanimated的动画调度存在微小偏差

上面的两种方案都是Reanimated原生支持的响应式处理方式，更贴合库的设计思路，代码也更简洁直观。

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