React Native Lottie的onAnimationFinish事件iOS端不触发问题

iOS端lottie-react-native不支持progress受控属性和autoPlay属性混用：只要组件传入了手动控制的progress值，就会进入纯手动控制模式，自动播放逻辑、动画完成事件的监听链路都不会初始化，onAnimationFinish自然不会触发。Android端对这种混合写法做了额外兼容，所以能正常运行，属于双端实现逻辑不一致导致的问题。

两种方案二选一即可，禁止混用受控进度控制和自动播放逻辑：

方案1：保留手动动画控制逻辑 #

你已经通过Animated.timing实现了3秒内进度从0到1的控制，直接删除autoPlay属性，不需要依赖组件的onAnimationFinish回调，在Animated.timing的启动完成回调里处理跳转逻辑即可，双端一致性最高：

const progress = useRef(new Animated.Value(0)).current;

const handleLikeAnimation = () => {
  Animated.timing(progress, {
    toValue: 1,
    duration: 3000,
    useNativeDriver: true,
  }).start(({ finished }) => {
    // 仅在动画正常播放完成、未被中断时触发跳转
    if (finished) {
      navigation.navigate("Leaderboard", currentcomp);
    }
  });
};

对应Lottie组件写法调整为：

<View style={{justifyContent:'center', width, height}}>
  <LottieView
    style={{width:50, height:100, alignSelf:'center'}}
    progress={progress}
    source={require('../assets/lottie/loaderlottie.json')}
    loop={false}
  />
</View>

在你需要触发动画的时机（比如页面进入后、点击事件中）调用handleLikeAnimation()即可，不要依赖autoPlay自动启动。

方案2：使用组件自带的自动播放能力 #

如果你不需要手动控制动画播放节奏，直接删除progress属性，保留autoPlay和onAnimationFinish即可，iOS端可正常触发完成回调：

<View style={{justifyContent:'center', width, height}}>
  <LottieView
    style={{width:50, height:100, alignSelf:'center'}}
    source={require('../assets/lottie/loaderlottie.json')}
    autoPlay
    loop={false}
    onAnimationFinish={() => navigation.navigate("Leaderboard", currentcomp)}
  />
</View>

如果你使用的是6.0及以上版本的lottie-react-native，iOS端onAnimationFinish在动画被打断（比如切后台、组件提前卸载）时也会触发，需要判断回调返回的取消标记，避免误跳转：

onAnimationFinish={(isCancelled) => {
  if (!isCancelled) {
    navigation.navigate("Leaderboard", currentcomp);
  }
}}

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