如何在 React Native 中显示动画 gif? [英] How do I display an animated gif in React Native?

问题描述

如何在 React Native 中显示动画 gif.这是我试过的.

How can I display an animated gif in react native. This is what I've tried.

<Image source={{uri: "loading"}} />

它在 .png 文件中工作正常，但是当我使用 .gif 文件时它是空白的.我在某处阅读尝试将 .gif 重命名为 .png 但这只是显示动画 gif 的一帧而没有动画.有什么想法吗?

It works fine with a .png file but when I use a .gif file it's blank. I read somewhere to try renaming the .gif to a .png but that just displays one frame of the animated gif with no animation. Any ideas?

推荐答案

对于 RN <0.60

默认情况下，Android React Native 应用程序不支持 Gif 图像.您需要设置使用 Fresco 来显示 gif 图像.代码:

By default the Gif images are not supported in android react native app. You need to set use Fresco to display the gif images. The code:

编辑您的 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 }} 
    />

对于 RN >= 0.60

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

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

希望对大家有所帮助

这篇关于如何在 React Native 中显示动画 gif?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！