Lottie-React-Native 在 Expo 50 中的动画显示问题解析

问题背景

在 React Native 生态中，Lottie-react-native 是一个广泛使用的动画库，它允许开发者轻松地在应用中实现高质量的矢量动画。然而，随着 Expo SDK 升级到 50 版本，一些开发者报告了动画无法正常显示的问题。

核心问题表现

当开发者将 lottie-react-native 升级到 6.5.1 版本并与 Expo 50 配合使用时，动画无法正常显示。值得注意的是，回退到 5.1.6 版本时，动画又能正常工作。这个问题在多个开发环境中重现，包括使用 Hermes 引擎和 iOS 模拟器的情况。

问题根源分析

经过深入调查，发现这个问题主要源于以下几个方面：

1. 样式定义的变化：在 6.x 版本中，LottieView 对样式属性的处理方式发生了变化。特别是当只定义高度或宽度时，可能导致动画无法正确渲染。

2. 百分比单位的限制：新版本对百分比单位的支持不如旧版本完善，建议使用具体的像素值或 flex 布局。

3. JSON 文件格式要求：某些从在线工具下载的 Lottie JSON 文件可能包含非整数尺寸值，这在 6.x 版本中可能导致渲染问题。

解决方案

针对这些问题，开发者可以采取以下解决方案：

1. 明确定义宽高样式

<LottieView
  style={{ width: 200, height: 200 }}
  source={require('./animation.json')}
  autoPlay
  loop
/>

2. 使用 Flex 布局

<LottieView
  style={{ flex: 1 }}
  resizeMode="cover"
  source={require('./animation.json')}
  autoPlay
  loop
/>

3. 检查并修改 JSON 文件

确保 Lottie JSON 文件中的宽高值为整数：

{
  "w": 200,
  "h": 200,
  // 其他属性...
}

4. 确保从可靠来源获取 JSON 文件

某些在线工具生成的 JSON 文件可能存在兼容性问题，建议从官方渠道获取或使用专业工具验证。

最佳实践建议

1. 始终明确定义宽高：即使在容器中已经定义了尺寸，也建议在 LottieView 上明确设置。

2. 优先使用像素单位：相比百分比，具体像素值在新版本中表现更稳定。

3. 测试不同来源的 JSON 文件：如果动画不显示，尝试从不同来源获取相同的动画文件。

4. 关注版本迁移指南：升级前仔细阅读官方迁移文档，了解行为变化。

总结

Lottie-react-native 6.x 版本在样式处理和文件格式要求上比 5.x 版本更加严格。通过遵循上述解决方案和最佳实践，开发者可以顺利在 Expo 50 环境中使用最新版本的 Lottie 库。这个问题也提醒我们，在升级关键依赖时，需要充分了解版本间的差异和潜在的影响因素。