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

开发01

如何在react native中显示动画gif?这就是我尝试过的。

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

.png文件可以正常工作,但是当我使用.gif文件时,它为空白。我在某处阅读过,尝试将.gif重命名为.png,但这仅显示了动画gif的一帧而没有动画。有任何想法吗?

文卡特什·索姆(Venkatesh Somu)

对于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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在react-native android应用中显示GIF?

来自分类Dev

如何在React Native中显示图标?

来自分类Dev

如何在Java中绘制GIF动画?

来自分类Dev

如何在分层视图顶部的Objective C中显示动画GIF?

来自分类Dev

如何在Windows Phone 8.1(RT)应用程序中显示动画GIF?

来自分类Dev

如何在MIT App Inventor中以透明背景显示动画gif?

来自分类Dev

如何在分层视图顶部的Objective C中显示动画GIF?

来自分类Dev

动画未在React Native移动应用中显示

来自分类Dev

如何在Laravel中显示GIF

来自分类常见问题

如何在React Native App中显示超链接?

来自分类Dev

如何在React Native中显示获取的数据

来自分类Dev

如何在React Native的两栏中显示卡片?

来自分类Dev

如何在React Native中按组显示数组值

来自分类Dev

如何在React Native中水平显示来自API的数据

来自分类Dev

如何在React Native中显示一次屏幕?

来自分类Dev

如何在React Native中显示来自Firebase Firestore的数据

来自分类Dev

如何在React Native中突出显示单个按钮?

来自分类Dev

如何在 React Native 中显示底部导航上方的组件?

来自分类Dev

如何在 React Native 中显示渐变 SVG 图像

来自分类Dev

如何在 React Native 中显示 Facebook 用户名?

来自分类Dev

如何在 React Native 中显示 https 图像?

来自分类Dev

如何在React Native React Navigation 5中为标题后退按钮的颜色设置动画?

来自分类Dev

如何在android中从URL播放动画GIF图像?

来自分类Dev

如何在HTML文档中制作GIF动画?

来自分类Dev

如何在android中从URL播放动画GIF图像?

来自分类Dev

如何在Twitter中为iOS上载动画GIF?

来自分类Dev

如何在react native中显示带有react native视频的多个视频?

来自分类Dev

如何在 react-native 中使用 ImageBackground 播放 gif?

来自分类Dev

gif 图像未显示在 react-native IOS 应用程序中

Related 相关文章

  1. 1

    如何在react-native android应用中显示GIF?

  2. 2

    如何在React Native中显示图标?

  3. 3

    如何在Java中绘制GIF动画?

  4. 4

    如何在分层视图顶部的Objective C中显示动画GIF?

  5. 5

    如何在Windows Phone 8.1(RT)应用程序中显示动画GIF?

  6. 6

    如何在MIT App Inventor中以透明背景显示动画gif?

  7. 7

    如何在分层视图顶部的Objective C中显示动画GIF?

  8. 8

    动画未在React Native移动应用中显示

  9. 9

    如何在Laravel中显示GIF

  10. 10

    如何在React Native App中显示超链接?

  11. 11

    如何在React Native中显示获取的数据

  12. 12

    如何在React Native的两栏中显示卡片?

  13. 13

    如何在React Native中按组显示数组值

  14. 14

    如何在React Native中水平显示来自API的数据

  15. 15

    如何在React Native中显示一次屏幕?

  16. 16

    如何在React Native中显示来自Firebase Firestore的数据

  17. 17

    如何在React Native中突出显示单个按钮?

  18. 18

    如何在 React Native 中显示底部导航上方的组件?

  19. 19

    如何在 React Native 中显示渐变 SVG 图像

  20. 20

    如何在 React Native 中显示 Facebook 用户名?

  21. 21

    如何在 React Native 中显示 https 图像?

  22. 22

    如何在React Native React Navigation 5中为标题后退按钮的颜色设置动画?

  23. 23

    如何在android中从URL播放动画GIF图像?

  24. 24

    如何在HTML文档中制作GIF动画?

  25. 25

    如何在android中从URL播放动画GIF图像?

  26. 26

    如何在Twitter中为iOS上载动画GIF?

  27. 27

    如何在react native中显示带有react native视频的多个视频?

  28. 28

    如何在 react-native 中使用 ImageBackground 播放 gif?

  29. 29

    gif 图像未显示在 react-native IOS 应用程序中

热门标签

归档