【问题标题】:GIF image not showing animation in react-nativeGIF 图像未在 react-native 中显示动画
【发布时间】:2018-02-03 04:30:07
【问题描述】:

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

【问题讨论】:

  • 您忘记发布代码了。请添加
  • 它来自 images.js 文件这是代码 Profileload : require('./img/Loading_icon.gif')
  • 所以图像显示但没有移动?
  • 是的动画不工作

标签: react-native


【解决方案1】:

之前我修复了 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.+' 

}

那么你需要重新打包app,你可以通过两种方式显示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】:

就像其他资产图片一样:

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

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

【讨论】:

    【解决方案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问题。

    【讨论】:

      【解决方案4】:
       <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'

      【讨论】:

        【解决方案5】:

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

        *对我来说 react-native 版本 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, }}
         />
        

        【讨论】:

          猜你喜欢
          • 2016-06-06
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-02-07
          • 2017-10-15
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多