GIF图像不显示反应原生的动画

时间:2017-08-25 07:03:23

标签: react-native

我在react-native中遇到gif图像的问题。如何在反应原生中使用gif图像。这是我的代码,我已将图像放在images.js文件中。

5 个答案:

答案 0 :(得分:3)

就像其他资产一样:

 New-Item -Name _netrc -ItemType File -Path $env:userprofile

注意You need to turn on GIF support for Android version

答案 1 :(得分:2)

以前,我修复了在ReactNative中显示gif图像的问题。 如果按照以下步骤操作,您也可以解决此问题,

默认情况下,android 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 }} 
/>

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

答案 2 :(得分:1)

使用此,

<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问题。

答案 3 :(得分:1)

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

///将其添加到android / app / build.gradle中的依赖项内

编译'com.facebook.fresco:animated-base-support:1.3.0'

编译'com.facebook.fresco:animated-gif:1.3.0'

编译'com.facebook.fresco:animated-webp:1.3.0'

编译'com.facebook.fresco:webpsupport:1.3.0'

答案 4 :(得分:1)

在android / app / build.gradle中的依赖项块中添加该

*对我而言,本机版本0.57.8。它对我有用。

编译'com.facebook.fresco:animated-gif:1.10.0'
   编译'com.facebook.fresco:fresco:1.10.0' *

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