react-native-reanimated嵌套带延迟重复动画无法无限循环怎么办

react-native-reanimated 目前存在嵌套withRepeat的事件冒泡缺陷：内层withRepeat跑完指定次数的动画后，不会向外层的withRepeat发送动画完成通知。你代码里外层套的无限循环withRepeat(..., -1, true)收不到内层动画结束的信号，自然不会触发下一轮循环，最终就只会跑第一轮，只有2s延迟和内层6次重复动画能正常生效。

别用两层withRepeat嵌套的写法，改成用动画完成回调手动触发下一轮循环，完全绕开这个嵌套bug，逻辑也更可控：

import { useEffect } from 'react';
import { withDelay, withRepeat, withTiming, cancelAnimation } from 'react-native-reanimated';

// progress为你之前通过useSharedValue创建的动画共享值
useEffect(() => {
  const runAnimationLoop = () => {
    progress.value = withDelay(
      2000,
      withRepeat(
        withTiming(0, { duration: 500 }),
        6,
        true,
        // 内层动画全部执行完后触发回调
        (isFinished) => {
          if (isFinished) {
            // 手动启动下一轮循环，实现无限重复效果
            runAnimationLoop();
          }
        }
      )
    );
  };

  runAnimationLoop();

  // 组件卸载时清理动画，避免内存泄漏
  return () => {
    cancelAnimation(progress);
  };
}, []);

补充说明 #

• 上述代码和你原本预期的效果完全一致：每轮动画先等待2s，再执行6次往返的500ms动画，全部跑完后自动进入下一轮，无限循环
• 如果你需要保留原代码中外层循环的自动反转逻辑，只需要在循环函数里维护一个切换的目标值变量，每次启动下一轮时切换withTiming的目标参数即可，不需要依赖withRepeat的自动反转属性
• 不要尝试用withSequence包裹内层withRepeat来绕开问题，实际测试下来同样存在回调不触发的情况，手动触发下一轮是目前最稳定的方案

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