React Native中Android端加载本地GIF文件不显示问题

React Native框架默认仅在iOS端内置了GIF动图的解码支持，Android端出于包体积考量，默认没有集成Fresco的GIF动图解码库，因此会出现iOS端GIF正常播放、Android端仅显示静态第一帧或者完全不显示的问题，你写的组件加载代码本身没有语法或逻辑错误。

• 打开安卓工程下的android/app/build.gradle配置文件（注意是app模块下的gradle文件，不是项目根目录的build.gradle）
• 在文件内的dependencies依赖块中，添加GIF解码依赖，原有依赖不要做任何修改：

dependencies {
  // 项目原有依赖保持不变
  // 新增GIF动图解码支持
  implementation "com.facebook.fresco:animated-gif:${project.ext.react['frescoVersion']}"

  // 按需添加：如果需要支持WebP格式图片可放开下面两行注释
  // implementation "com.facebook.fresco:webpsupport:${project.ext.react['frescoVersion']}"
  // implementation "com.facebook.fresco:animated-webp:${project.ext.react['frescoVersion']}"
}

注意：这里直接引用RN内置的Fresco版本号，不需要手动硬编码版本，避免出现依赖版本冲突问题。

• 退出当前正在运行的Metro打包服务，在项目根目录执行清理构建缓存的命令：

cd android && ./gradlew clean

• 回到项目根目录，重新编译安装安卓应用即可，修改原生依赖后热重载/热更新不生效，必须重新执行全量编译：

npx react-native run-android

• 不需要修改你原来写的ImageBackground加载本地资源的业务代码，该写法本身符合RN的资源引用规范
• 不要手动将GIF资源放到安卓原生的res/drawable目录下混用，保持当前require引用JS侧资源的方式即可
• 如果是使用Expo托管的项目，默认已经内置了GIF支持，出现该问题一般是预构建eject后依赖丢失，按上述步骤添加依赖即可修复

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