lottie-react-native组件无法显示问题求助（附代码示例）

• 文件路径或名称错误
  确认PoliteChicky.json和当前组件文件在同一目录，文件名的拼写、大小写、后缀（.json）完全正确。如果文件在子文件夹里，要修正相对路径，比如./animations/PoliteChicky.json。

• 组件缺少高度配置
  你的代码里LottieView只设置了宽度，没有指定高度，Lottie动画需要明确的尺寸才能渲染。可以给组件添加固定高度，或者利用父容器的flex布局让它占满空间：

  <LottieView
    source={require('./PoliteChicky.json')}
    style={{width: '100%', height: 300}} // 固定高度
    autoPlay
    loop
  />
  

  或者用flex:1：

  <LottieView
    source={require('./PoliteChicky.json')}
    style={{flex: 1, width: '100%'}}
    autoPlay
    loop
  />
  

• 依赖未正确安装

  • 确保安装了完整依赖：iOS项目需要额外安装lottie-ios，执行npm install lottie-react-native lottie-ios；Android项目执行npm install lottie-react-native即可。
  • iOS项目需进入ios目录执行pod install；React Native 0.60以下版本需要手动执行react-native link lottie-react-native。

• 动画文件本身损坏
  换一个确认可用的Lottie动画json文件替换当前文件测试，比如使用Lottie官方提供的示例动画，排除文件损坏的可能。

• 版本不兼容
  检查lottie-react-native版本和你的React Native版本是否匹配，部分旧版React Native无法适配最新版lottie，可查看lottie-react-native的版本说明，安装对应兼容的版本。

内容的提问来源于stack exchange，提问作者Goku Sama