如何在React Native中显示动画gif？

Question

如何在本机中显示动画gif.这就是我尝试过的.

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

它适用于.png文件,但是当我使用.gif文件时,它是空白的.我在某处尝试将.gif重命名为.png,但只显示动画gif的一帧而没有动画.有任何想法吗？

Answer 1

默认情况下,android react本机应用程序不支持Gif图像.您需要设置使用Fresco来显示gif图像.代码:

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

对于我来说，在React Native 0.65.1上， react-native 文档 中的解决方案不起作用，我必须使用最新版本的 Fresco：

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

现在 GIF 对我来说可以在 Android 上运行了。

您可以从他们的网站查看最新的 Fresco 。

Answer 3

您需要添加扩展名并以此方式要求:

<Image source={require('./path/to/image/loading.gif')} />

要么

<Image source={{uri: 'http://www.urltogif/image.gif'}} />

RN处理好gif图像,请查看此示例.

Answer 4

对于 React Native 0.60 及更高版本

打开您的android/app/build.gradle文件并将以下几行添加到第一dependencies部分

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

进而

cd android
gradlew clean
react-native run-android

Answer 5

对于Android，您需要添加Facebook的壁画库

React Native并没有开箱即用的Gif支持，但是您可以添加Facebook的Fresco库来添加此支持。

您应该能够简单地将以下内容添加到build.gradle文件中：

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

特定版本兼容性

如果您遇到麻烦或想要使用静态版本（强烈建议使用），则只需转到以下React Native文档页面，然后将0.46URL中的替换为您正在运行的React Native版本：

https://facebook.github.io/react-native/docs/0.46/image.html#gif-and-webp-support-on-android