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

Posted 2023-03-25

【中文标题】如何在 react-native android 应用程序中显示 GIF？

【英文标题】：How to display GIF in react-native android app?

【发布时间】：2016-11-05 06:55:55

【问题描述】：

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

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

这里有一个类似的问题，但如前所述，这仅适用于 iOS： How do I display an animated gif in React Native? 关于这个提交，它应该可以工作： https://github.com/facebook/react-native/commit/fcd7de5301655b39832d49908e5ca72ddaf91f7e

【问题讨论】：

如果您只是通过链接加载 GIF 图片，那么为什么不使用 WebView？

【参考方案1】：

我们通过将 GIF 支持等选项设为可选，使核心库更小。

因为we have to manually opt-in for gif support in Android。 将以下两行添加到依赖项下的 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"

这解决了你的调试版本的问题，但是如果你想在你的发布版本中解决它，你必须在你的 proguard-rules 文件中添加以下行：

-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 修复，并将包含在下一个版本中。

【讨论】：

当你说下一个版本是那个版本 0.13.0 时？我刚刚尝试了该版本，但问题似乎仍然存在

compile 'com.facebook.fresco:animated-gif:0.+'

此编译行在最新的 react 本机版本中不起作用。任何帮助都将不胜感激。

Release build 因本机反应而失败。

要找到正确的兼容版本，只需将 0.46 替换为您正在使用的 React Native 版本，然后查看文档的内容：facebook.github.io/react-native/docs/0.46/…

【参考方案2】：

对于最新的 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'

【讨论】：

@AdirZoari: React native support gif for ios 默认情况下。

要找到正确的兼容版本，只需将 0.46 替换为您正在使用的 React Native 版本，然后查看文档的内容：facebook.github.io/react-native/docs/0.46/…

如果根据github.com/facebook/fresco/issues/516的multidex错误添加'multiDexEnabled true'

@TekesteKidanu 有没有办法在 Android 中只播放一次 GIF？

【参考方案3】：

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

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

Source

【讨论】：

react-native 文档：reactnative.dev/docs/image#gif-and-webp-support-on-android

【参考方案4】：

您可以添加这些依赖项。我在版本（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'

【讨论】：

@KartiikeyaBaleneni 尝试上面的答案，它似乎适用于早期版本。

要找到正确的兼容版本，只需将 0.46 替换为您正在使用的 React Native 版本，然后查看文档的内容：facebook.github.io/react-native/docs/0.46/…

【参考方案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'

【讨论】：

这应该是目前最被接受的答案。谢谢@Mapsy

我在 react native 版本 0.59.9 中遇到了 gif 问题，并通过这个答案解决了。谢谢@Mapsy

【参考方案6】：

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

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

【讨论】：

@staminna 当我尝试将我的 FYP 转换为 react-native 时，我实际上正在研究它，并且上述方法对我有用。我从 git-hub 获得了上述解决方案，但我不记得是哪个问题了。这个问题可能有很多可能性，这就是为什么这个问题有很多答案。您可以在 Github 上推送您的工作并分享链接。有时间我会看的。

我可以在模拟器上看到使用chrome的.gif，因此我认为这不是网络问题

media.giphy.com/media/ZFRGcQqAxEw9RB9IHm/giphy.gif' />

我认为你必须将它保存在本地的react应用中。

在 react-native 版本 0.61.4 上也适用于我 ;)

【参考方案7】：

来自 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'

【参考方案8】：

在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

【讨论】：

当我更新到 RN 0.66.3 时，Gifs 停止了动画，您的回答有所帮助，但我必须从 fresco 2.0.0 更新到 2.6.0，2.4.0 将无法工作。确保检查提供的链接并获取最新版本！

【参考方案9】：

对我来说，添加如下依赖项还不够：

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'

【讨论】：

有没有办法在Android上只播放一次GIF？

【参考方案10】：

默认 Android 不支持 GIF 和 WebP。所以在android项目的app级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'