Expo构建React Native项目中GIF无法显示问题求助

如果你用的是Expo Managed Workflow（未 eject/未执行 prebuild） #

Managed模式下无法直接修改原生gradle配置，可通过以下方式解决：

• 改用expo-image组件替代React Native原生Image组件：
  1. 安装依赖：npx expo install expo-image
  2. 将代码中的Image替换为expo-image提供的Image组件，它默认支持GIF动图显示，无需额外配置Fresco。
• 检查app.json/app.config.js配置：确保expo.image相关配置保持默认开启状态，未禁用媒体支持。

如果你用的是Expo Bare Workflow（已 eject/执行过 prebuild） #

此模式下可修改Android原生配置启用Fresco的GIF支持：

1. 打开android/app/build.gradle，在dependencies块中添加GIF支持依赖：

   dependencies {
     // 保留原有依赖
     implementation 'com.facebook.fresco:animated-gif:2.6.0' // 版本号需匹配当前React Native对应的Fresco版本
   }
   

2. 确认React Native与Fresco版本兼容，比如RN 0.70+对应Fresco 2.6.0左右，可参考RN官方依赖对应关系。
3. 清理并重构项目：

   cd android && ./gradlew clean && cd .. && npx react-native run-android
   

4. 检查Image组件使用：确保加载GIF时未使用不支持动图的resizeMode，同时确认本地GIF路径用require('./xxx.gif')引入，网络GIF路径正确。

通用排查步骤 #

• 测试不同GIF文件：排除单个文件损坏导致的显示问题。
• 检查网络权限：若加载网络GIF，Bare模式需确认AndroidManifest.xml中已添加<uses-permission android:name="android.permission.INTERNET" />（Managed模式Expo默认已配置）。
• 清除项目缓存：执行npx expo start --clear（Managed）或npx react-native start --reset-cache（Bare）后重启项目。

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