如何在 react-native 中使用 ImageBackground 播放 gif？

Question

我有一个使用 react-native 的 ImageBackground 组件渲染的 GIF 背景图像。 唯一的问题是 gif 没有运行，它变成了静态。

当我使用 Image 组件时一切正常，但我需要使用 ImageBackground 组件

    <ImageBackground
       source= {require('../../assets/img/initial_wallpaper.gif')} 
       style={{flex:1}} >                

    </ImageBackground>

使用上面的代码静态呈现 GIF。 当我使用在线 expo util 来测试它时，它可以使用完全相同的代码在那里正常工作。 但是当我在我的 react-native 代码库中实现它时，它不起作用。 任何见解将不胜感激。 谢谢 ：）

Answer 1

Android上的GIF和WebP支持

构建自己的本机代码时，默认情况下，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.10.0'

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

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

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

Answer 2

我在同一主题上发现了这个问题。 由此，我猜您正在运行Android吗？ 以下内容将帮助您解决问题：

编辑您的android / app / build.gradle文件并添加以下代码：

 dependencies: { ... compile 'com.facebook.fresco:fresco:1.+' // For animated GIF support compile 'com.facebook.fresco:animated-gif:1.+' // For WebP support, including animated WebP compile 'com.facebook.fresco:animated-webp:1.+' compile 'com.facebook.fresco:webpsupport:1.+' } 

那么您需要再次捆绑该应用。您可以通过两种方式显示gif图像。

 1-> <Image source={require('./../images/load.gif')} style={{width: 100, height: 100 }} /> 2-> <Image source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}} style={{width: 100, height:100 }} /> 

Answer 3

对于像我这样在RN 0.60 版中寻找解决方案的其他人，请尝试在 app build.gradle 文件中添加以下内容

implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of

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