React Native中Lottie动画结束后显示图片再跳转的实现问题

原代码存在的问题 #

• 直接在useEffect的setTimeout内编写JSX不会触发组件渲染，React组件的UI只能通过return的内容更新
• 硬编码4000ms的延迟无法和Lottie动画实际时长同步，动画时长可能和预设值不符
• 缺少状态变量控制Lottie动画与目标图片的显示切换

修改方案 #

1. 使用useState管理显示状态，控制Lottie和图片的切换
2. 利用LottieView的onAnimationFinish回调监听动画结束事件，替代不可靠的setTimeout
3. 在动画结束后切换显示状态，显示目标图片，再延迟跳转到Home页面

完整代码 #

import { useState } from 'react';
import { View, Image } from 'react-native';
import LottieView from 'lottie-react-native';
import images from './你的图片路径'; // 替换为实际图片文件路径

const Success = ({ navigation }) => {
  const [showLottie, setShowLottie] = useState(true);

  const handleAnimationFinish = () => {
    // 动画结束后切换状态，隐藏Lottie显示图片
    setShowLottie(false);
    // 图片显示指定时长后跳转，可根据需求调整延迟时间
    setTimeout(() => {
      navigation.navigate('Home');
    }, 2000);
  };

  return (
    <View style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      {showLottie ? (
        <LottieView
          style={{ width: 100, height: 60 }}
          source={images.progress}
          autoPlay
          onAnimationFinish={handleAnimationFinish} // 监听动画结束事件
        />
      ) : (
        <Image
          source={images.done}
          style={{ width: 100, height: 100 }}
        />
      )}
    </View>
  );
};

export default Success;

关键说明 #

• showLottie状态变量控制当前显示Lottie动画还是目标图片
• onAnimationFinish回调会在Lottie动画自然结束时触发，确保和动画实际时长完全同步
• 图片显示的延迟时长可按需调整，若不需要延迟展示图片，可直接在handleAnimationFinish内调用navigation.navigate('Home')

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