在React Native中，GIF图片不显示动画

Question

我在React Native中遇到了GIF图像的问题。如何在React Native中使用GIF图像。这是我的代码，我已经将图像放置在images.js文件中。

- Shivani Chauhan

---

你忘了发布代码，请加上。 - rakwaht

<Image source={images.Profileload} /> 这段代码来自于 images.js 文件，其中 Profileload 代码为 require('./img/Loading_icon.gif')。 - Shivani Chauhan

那么图片显示出来了，但是没有动？ - rakwaht

是的，动画没有起作用。 - Shivani Chauhan

Answer 1

之前我解决了ReactNative中显示gif图像的问题。如果您按照以下步骤操作，您也可以解决这个问题：

默认情况下，在安卓React Native应用程序中不支持Gif图像。您需要使用Fresco来显示gif图像。代码如下：

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图片。

对于RN >= 0.60

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

 implementation 'com.facebook.fresco:animated-gif:2.0.0'   //use
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 }} 
/>

我希望这对其他人有所帮助,

- Venkatesh Somu

---

非常感谢你，你救了我的一天。 - Arunkumar K

Answer 2

就像其他资产一样，图片也是如此：

<Image
  source={require('./images/loading.gif')}
  style={{height: 200, width: 200}}
  resizeMode='contain'
/>

注意: 您需要开启Android版本的GIF支持

- pqkluan

Answer 3

使用这个：

<Image
  style={styles.gif}
  source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
/>

请确保添加以下依赖项：

compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1' 

如需更多详细信息，请参考StackOverFlow问题。

- Radhey

Answer 4

 <Image source={require('./img/ezgif.com-resize.gif')} />

//在android/app/build.gradle的依赖块中添加以下内容

compile 'com.facebook.fresco:animated-base-support:1.3.0'

compile 'com.facebook.fresco:animated-gif:1.3.0'

compile 'com.facebook.fresco:animated-webp:1.3.0'

compile 'com.facebook.fresco:webpsupport:1.3.0'

- Asanka Sampath

Answer 5

在android/app/build.gradle的依赖块中添加以下内容：

*对于我的react-native版本0.57.8，这对我有效。

compile 'com.facebook.fresco:animated-gif:1.10.0'
compile 'com.facebook.fresco:fresco:1.10.0' *

 <Image source={{ uri: 'https://media.giphy.com/media/NSI5d5LiHPxXCKDbob/giphy.gif' }}
style={{ height: 80, width: 60, }}
 />

- kumar rakesh