Lottie React Native订单页动画失效问题求助

排查步骤与解决方法 #

1. 确认平台依赖配置 #

• iOS：进入ios目录执行pod install，彻底关闭Xcode/模拟器后重新构建项目。6.x版本的lottie-react-native依赖原生组件，pod安装不完整会直接导致动画无法渲染。
• Android：执行cd android && ./gradlew clean清理构建缓存，再重新编译项目。同时可检查android/app/build.gradle中是否正确引入Lottie依赖（通常安装时自动配置，手动确认更稳妥）。

2. 验证Lottie JSON文件有效性 #

• 将thumbs.json和sparkle.json导入Lottiefiles预览工具（本地或在线），确认文件无损坏、格式正确。部分下载的JSON可能存在缺失字段、编码错误等问题，导致无法被解析。
• 临时替换为官方示例动画JSON（比如简单的点赞动画），测试是否能正常显示，排除自定义JSON文件本身的问题。

3. 调整LottieView组件配置 #

• 添加resizeMode="contain"属性：尺寸适配问题是动画不显示的常见原因，该属性能确保动画在设置的宽高内完整渲染：

  <LottieView
    source={require("../assets/thumbs.json")}
    style={{
      height: 260,
      width: 300,
      alignSelf: "center",
      marginTop: 40,
    }}
    autoPlay
    loop={false}
    speed={0.7}
    resizeMode="contain" // 新增属性
  />
  

• 暂时移除position:absolute测试sparkle动画：绝对定位可能导致动画层级被遮挡或超出可视区域，先让动画正常显示后再调整位置。

4. 修改导航跳转时机 #

当前代码1300ms后跳转，可能动画还未加载完成就切换页面。可以：

• 延长超时时间至3000ms以上，测试动画是否能正常展示；
• 监听动画完成事件，确保两个动画都播放完毕后再跳转：

  import React, { useEffect, useRef } from "react";
  import LottieView from "lottie-react-native";
  
  const OrderScreen = () => {
    const navigation = useNavigation();
    const thumbsRef = useRef(null);
    const sparkleRef = useRef(null);
    let completedCount = 0;
  
    const onAnimationEnd = () => {
      completedCount++;
      if (completedCount === 2) {
        navigation.replace("Main");
      }
    };
  
    // 兜底超时跳转，防止动画卡住
    useEffect(() => {
      const timer = setTimeout(() => navigation.replace("Main"), 5000);
      return () => clearTimeout(timer);
    }, []);
  
    return (
      <SafeAreaView style={{ backgroundColor: "white", flex: 1 }}>
        <LottieView
          ref={thumbsRef}
          source={require("../assets/thumbs.json")}
          style={{ height: 260, width: 300, alignSelf: "center", marginTop: 40 }}
          autoPlay
          loop={false}
          speed={0.7}
          resizeMode="contain"
          onAnimationFinish={onAnimationEnd}
        />
        <Text
          style={{ marginTop: 20, fontSize: 19, fontWeight: "600", textAlign: "center" }}
        >
          Your Order has been recieved
        </Text>
        <LottieView
          ref={sparkleRef}
          source={require("../assets/sparkle.json")}
          style={{ height: 300, position: "absolute", top: 100, width: 300, alignSelf: "center" }}
          autoPlay
          loop={false}
          speed={0.7}
          resizeMode="contain"
          onAnimationFinish={onAnimationEnd}
        />
      </SafeAreaView>
    );
  };
  

5. 版本兼容性调整 #

尝试降级到lottie-react-native@6.2.0或升级至最新稳定版，部分6.3.x版本可能存在特定平台的适配bug，切换版本后重新安装依赖并构建项目。

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