如何在 react-native android 应用程序中显示 GIF？

Question

我想在我的 android react-native 应用程序的图像标签中通过 URL 显示一个简单的 gif，但是当我启动它时没有显示任何图像。 docs 中提供的代码仅适用于 iOS 但不适用于 android:

<Image
  style={styles.gif}
  source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
/>

这里有一个类似的问题，但如前所述，这仅适用于 iOS：
关于此提交，它应该可以工作： https://github.com/facebook/react-native/commit/fcd7de5301655b39832d49908e5ca72ddaf91f7e

Answer 1

We made the core library smaller by making things like GIF support optional.

因为那个we have to manually opt-in for gif support in Android。将以下两行添加到 dependencies 下的 android/app/build.gradle 文件中：

compile "com.facebook.fresco:animated-gif:1.3.0"
compile "com.facebook.fresco:animated-base-support:1.3.0"

因此您的依赖项部分可能如下所示：

dependencies {
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+"  // From node_modules
  compile "com.facebook.fresco:animated-gif:1.3.0"
  compile "com.facebook.fresco:animated-base-support:1.3.0"

这解决了调试版本的问题，但如果您现在还想在发布版本中解决它，则必须将以下行添加到混淆规则文件中：

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

这里有更多信息：https://github.com/facebook/fresco/issues/1177

此 commit 已修复此问题，并将包含在下一版本中。

Answer 2

您可以添加这些依赖项。我在版本 (v0.44.0) 中使用它：

compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1'

在v0.50版本中您只需添加

compile 'com.facebook.fresco:animated-gif:1.3.0'

Answer 3

对于最新的 React Native(v0.48)，以上所有内容都不适合我。我必须在 android/app/build.gradle

中添加以下依赖项

compile 'com.facebook.fresco:fresco:1.5.0' compile 'com.facebook.fresco:animated-gif:1.5.0'

Answer 4

对我来说添加如下依赖项是不够的：

compile 'com.facebook.fresco:animated-gif:1.9.0'

我还必须升级文件中的 gradle 版本：

android/gradle/wrapper/gradle-wrapper.properties 像这样：

distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

还有我在文件中的构建工具版本：

android/build.gradle 像这样：

classpath 'com.android.tools.build:gradle:3.0.1'

Answer 5

我们升级到 "react-native": "^0.57.1"，这使我们的 gif 动画无法播放；他们只是将动画的第一帧渲染为静态图像。

为了纠正这个问题，我们包含了以下库：

compile 'com.facebook.fresco:animated-gif:1.10.0'
compile "com.facebook.fresco:animated-base-support:1.3.0"

// (Only if supporting WebP.)
compile 'com.facebook.fresco:animated-webp:1.10.0'
compile 'com.facebook.fresco:webpsupport:1.10.0'

Answer 6

如果使用 RN 版本 .60，请尝试在应用 build.gradle 文件中添加以下内容

dependencies {
    implementation 'com.facebook.fresco:animated-gif:2.0.0'
}

Source

Answer 7

对于最新版本的 react-native '0.61.5' 你需要 '2.0.0' Fresco Version ;

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

Answer 8

来自 React Native Docs:

构建您自己的本机代码时，Android 默认不支持 GIF 和 WebP。

您需要在 android/app/build.gradle 中添加一些可选模块，具体取决于您的应用程序的需要。

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

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

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.1.0'
  implementation 'com.facebook.fresco:webpsupport:2.0.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
}

Answer 9

在RN 64.1中你需要使用较新版本的fresco来支持Android

中的gif

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

frescolib ref

Answer 10

默认不支持 GIF 和 WebP Android。因此，在 android 项目的应用程序级别 build.gradle 文件中添加下面的依赖项并同步。

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

如何在 react-native android 应用程序中显示 GIF？

How to display GIF in react-native android app?

android

image

gif

react-native