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

Question

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

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

Answer 1

对于RN<0.60

默认情况下，android react native应用程序不支持Gif图像。您需要设置use 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.+' 
}

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

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

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