React Native 0.65安卓端GIF图片无法播放动画问题求助

解决方案 #

• 修正Fresco依赖版本匹配
  RN 0.65内置的Fresco版本为2.5.0，你之前引入的2.0.0版本和内置版本冲突会导致GIF动画失效，修改android/app/build.gradle的dependencies配置：

// 动画GIF支持 版本需和RN 0.65内置Fresco版本一致
implementation 'com.facebook.fresco:fresco:2.5.0'
implementation 'com.facebook.fresco:animated-gif:2.5.0'
// 如需支持webp动画可额外添加下面配置
// implementation 'com.facebook.fresco:animated-webp:2.5.0'

• 添加混淆规则（release包异常时适用）
  如果打release包时GIF无动画，在android/app/proguard-rules.pro中添加Fresco的混淆规则：

-keep class com.facebook.fresco.** { *; }
-keep interface com.facebook.fresco.** { *; }
-dontwarn com.facebook.fresco.**

• 确认Image组件宽高配置
  检查styles.loadingGif的样式是否设置了明确固定宽高，未设置明确宽高时GIF仅会加载第一帧静态图像，示例配置参考：

const styles = StyleSheet.create({
  // 其他样式省略
  loadingGif: {
    width: 80,
    height: 80,
    resizeMode: 'contain'
  }
})

• 全量清理缓存重新编译
  依次执行以下命令清理所有层级缓存：

# 清理依赖包重新安装
rm -rf node_modules yarn.lock package-lock.json
yarn install # 或npm install
# 清理Android构建缓存
cd android
./gradlew clean
cd ..
# 清理Metro打包缓存并启动服务
npx react-native start --reset-cache
# 新开终端执行运行命令
yarn android

• 排查第三方库冲突
  如果项目中引入了其他图片加载、全局资源处理类第三方库，确认是否有库重写了Fresco的初始化配置，关闭了GIF动画支持。

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