React Native Expo中Lottie动画无法播放的问题求助

以下是几个针对性的排查和修复方向：

1. 确认依赖包是否适配Expo环境 #

Expo项目优先使用官方维护的expo-lottie包，而非原生的lottie-react-native——后者在Expo环境下可能需要额外配置才能正常工作。操作步骤：

# 卸载原包
npm uninstall lottie-react-native
# 安装适配Expo的Lottie包
npx expo install expo-lottie

同时修改导入语句：

import LottieView from 'expo-lottie';

2. 检查动画容器的样式配置 #

如果styles.lottie未设置明确宽高，动画会因容器尺寸为0而无法显示。必须给LottieView指定宽高：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  lottie: {
    width: 200, // 根据需求调整
    height: 200,
    alignSelf: 'center', // 可选：让动画居中显示
  },
});

3. 验证动画JSON文件的有效性与路径 #

• 确认../assets/animated_icon.json的路径正确，文件确实存在于指定目录；
• 可以替换为Lottie官方示例JSON测试，若示例能播放，说明你下载的JSON文件可能损坏，重新从Lottie Files下载即可。

4. 优化动画播放逻辑 #

直接给LottieView添加autoPlay属性，无需手动调用play()，这种方式更简洁可靠：

<LottieView
  style={styles.lottie}
  ref={animationRef}
  source={require("../assets/animated_icon.json")}
  autoPlay={true}
  loop={true} // 可选：设置是否循环播放
/>

如果坚持手动触发，可调整为异步调用确保组件挂载完成：

useEffect(() => {
  const playAnimation = async () => {
    await animationRef.current?.play();
  };
  playAnimation();
}, []);

5. 修正TypeScript类型问题 #

若使用原生lottie-react-native，需安装对应的类型包：

npm install @types/lottie-react-native --save-dev

使用expo-lottie则无需额外安装类型包，官方已内置类型支持。

内容的提问来源于stack exchange，提问作者Anas Hafidi