React Native 0.78.1 Android端<Image>组件加载本地GIF无动效，添加Fresco依赖后仍未解决

React Native 0.78.1 Android端组件加载本地GIF无动效，添加Fresco依赖后仍未解决 #

嗨，我刚好踩过类似的坑！React Native 0.70+版本开始，Android端的Image组件默认已经切换到Coil作为图片加载库了，你之前添加Fresco依赖反而可能和默认的Coil产生冲突，这大概率是问题的根源。我给你梳理几个靠谱的解决步骤，一步步来排查：

第一步：先移除Fresco依赖，避免库冲突 #

打开你的Android项目下的app/build.gradle文件，把之前添加的Fresco相关依赖全部删掉，然后点击Android Studio的「Sync Project with Gradle Files」同步一下依赖。这一步很关键，两个图片加载库共存会导致各种奇怪的兼容性问题。

第二步：确保Coil支持GIF解码 #

虽然RN默认集成了Coil，但有时候需要手动添加GIF扩展来确保动图能正常播放：

1. 同样在app/build.gradle的dependencies块中添加Coil的GIF扩展依赖：

dependencies {
    // 保留你原本的其他依赖，新增这一行
    implementation "io.coil-kt:coil-gif:2.4.0"
}

注：版本号可以根据你项目中RN自带的Coil版本调整，2.4.0是和RN 0.78.x兼容的稳定版本

2. 同步gradle后，执行Build -> Clean Project再Build -> Rebuild Project，彻底清理旧的构建缓存。

第三步：检查你的Image组件代码和样式 #

有时候样式设置不当也会导致动图“不动”：

• 确保你的Image组件（或者换成Animated.Image试试，稳定性更好）设置了明确的宽高，并且resizeMode合理：

import { Image, StyleSheet } from 'react-native';
// 或者用Animated.Image
// import { Animated, StyleSheet } from 'react-native';

export default function YourComponent() {
  return (
    <Image
      source={require('../../assets/images/signup.gif')}
      style={styles.image}
      resizeMode="contain" // 这个属性很重要，避免GIF被拉伸变形或者裁剪
    />
  );
}

const styles = StyleSheet.create({
  image: {
    width: 200, // 必须设置明确的宽高，不能让组件自适应导致尺寸异常
    height: 200,
  },
});

第四步：排查GIF文件本身的问题 #

有些GIF文件可能因为压缩、格式损坏或者帧数异常导致无法播放，建议你换一个已知能正常播放的GIF测试一下，排除文件本身的问题。

第五步：清理RN的缓存并重新运行 #

最后，清理React Native的打包缓存，避免旧资源残留：
在终端执行：

npx react-native start --reset-cache

然后重新运行Android项目：

npx react-native run-android

按照这个流程走下来，应该能解决你的GIF不动的问题。我之前就是因为误加了Fresco导致冲突，移除后加上Coil的GIF扩展就正常了！

备注：内容来源于stack exchange，提问作者abdullah mazher