如何发挥一个gif使用图像背景在反应原生？

Question

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

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

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

    </ImageBackground>

使用GIF上方的代码进行静态渲染。当我使用online expo util来测试这一点时，它使用完全相同的代码工作得很好。但当我在react本机代码库中实现这一点时，它就不起作用了。如有任何见解，将不胜感激。谢谢：）

Answer 1

对于像我这样在RN版本0.60中寻找解决方案的其他人，请尝试在应用程序内部版本中添加以下内容。gradle文件

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

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

Answer 2

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 3

我在同一个主题上发现了这个问题。由此看来，我猜你是在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 }} 
    />