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

Question

如何在本机反应中显示动画 gif。这是我尝试过的。

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

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

原文由 Dev01 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 RN < 0.60

默认情况下，android react native 应用程序不支持 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 }}
    />

对于 RN >= 0.60

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

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

我希望它对其他人有帮助，

原文由 Venkatesh Somu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您需要添加扩展并以这种方式要求它：

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

或者

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

原文由 G. Hamaide 发布，翻译遵循 CC BY-SA 4.0 许可协议