如何在react-native中使用ImageBackground播放gif? [英] How to play a gif using ImageBackground in react-native?

问题描述

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

I have a GIF background image that I am rendering using react-native's ImageBackground component. The only issue is that the gif is not running, it becomes static.

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

When I use the Image component everything works fine, but I need to use the ImageBackground component

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

    </ImageBackground>

使用GIF上方的代码进行静态渲染.当我使用在线expo util进行测试时，使用完全相同的代码可以正常工作.但是，当我在我的本机代码库中实现此功能时，它不起作用.任何见识将不胜感激.谢谢:)

Using the code above the GIF renders statically. When I use the online expo util to test this it works fine there with the exact same code. But when I implement this in my react-native code base it does not work. Any insight will be greatly appreciated. Thank you :)

推荐答案

我发现

I found this question on the same topic. From that, I'd guess you're running on Android? The following should help you resolve your problem:

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

Edit your android/app/build.gradle file and add the following code:

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图片这样两种方式.

then you need to bundle the app again, You can display the gif images in two ways like this.

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 }} 
    />

这篇关于如何在react-native中使用ImageBackground播放gif?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！