在React Native中，Android上的Gif图像无法正常工作

Question

在Android中，gif图像的动画无法正常播放

- pallav test

---

可能是如何在React Native Android应用程序中显示GIF？的重复问题。 - Laura

Answer 1

对于 react native 版本>=0.60 ：

在构建自己的原生代码时，默认情况下 Android 不支持 GIF 和 WebP 格式。

根据您的应用程序需求，您需要在 android/app/build.gradle 中添加一些可选模块。

implementation 'com.facebook.fresco:fresco:2.0.0'
implementation 'com.facebook.fresco:animated-gif:2.0.0'

最新的 react native 版本是 0.66 ：

implementation 'com.facebook.fresco:animated-gif:2.6.0'

- Kishan Bharda

---

你应该把它放在哪里？你首先需要安装一个包吗？ - kojow7

请把它放置在YourProject/android/app/build.gradle文件的dependencies下面。 - Zvonimir Peran

在 RN 0.66 中使用 implementation 'com.facebook.fresco:animated-gif:2.6.0'。 - Annie Tan

谢谢@AnnieTan，我已经在我的答案中添加了这个。 - Kishan Bharda

是的，在RN 0.66上也能正常工作，使用implementation 'com.facebook.fresco:animated-gif:2.6.0'，感谢@KishanBharda。 - DarkHorse

Answer 2

更新：react-native@0.57.0

// For animated GIF support
// ./android/app/build.gradle

implementation 'com.facebook.fresco:fresco:1.10.0'
implementation 'com.facebook.fresco:animated-gif:1.10.0'

- wkoutre

---

我尝试了各种库，只有这个对我有效，React 版本：0.59.9，谢谢。 - Elyas Nategh

https://facebook.github.io/react-native/docs/0.60/image#gif-and-webp-support-on-android - wkoutre

Answer 3

请参照FB文档中的详细说明，其中会指明所需内容。

根据您的应用程序需求，在android/app/build.gradle中添加一些可选模块。

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:1.3.0'

  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:1.3.0'
  compile 'com.facebook.fresco:webpsupport:1.3.0'

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.3.0'
}

此外，如果您在使用ProGuard时使用GIF格式的图片，您需要在proguard-rules.pro文件中添加以下规则：

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
  public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

- Prince

---

此链接已损坏。 - cmcodes

Answer 4

针对React Native版本：0.66.4

在android/app/build.gradle文件中添加以下行:

  implementation 'com.facebook.fresco:fresco:2.0.0'
    // For animated GIF support

 implementation 'com.facebook.fresco:animated-gif:2.6.0'
    // For WebP support, including animated WebP

 implementation 'com.facebook.fresco:animated-webp:2.0.0'

 implementation 'com.facebook.fresco:webpsupport:2.0.0'

然后像这样使用:

<Image
   source={require('../assets/splah.gif')}
   style={{ width: '100%',height:'100%' }}
/> 

- Mohit thakur

---

这对我有效。 "react": "18.0.0", "react-native": "0.69.0", - samthui7

Answer 5

我通过在android/app/build.gradle中执行以下操作解决了我的问题

implementation 'com.facebook.fresco:animated-gif:2.6.0'

- Ali Raza Khan

Answer 6

请在 android/app/build.gradle 文件中添加以下行：

 dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  compile 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  compile 'com.facebook.fresco:animated-gif:1.3.0'

  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:1.3.0'
  compile 'com.facebook.fresco:webpsupport:1.3.0'

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.3.0'
}

- Gaurav Rathore