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

Question

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

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

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

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

希望对其他人有帮助