react native 里安卓引用gif图片解决方案

最新推荐文章于 2024-06-06 10:08:01 发布
最新推荐文章于 2024-06-06 10:08:01 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： react native 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33323251/article/details/79384418
版权
react native 里安卓引用gif图片解决方案

相信不少入了react native坑的人在安卓上面引用GIF图的时候都遇到了这种情况，引用了GIF图片却像引用了静态图片一样，下面是此问题的解决方案：

在项目里找到android/app/build.gradle文件

在dependencies字段中添加：

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

然后重新运行 react-native run-android 命令即可

图片如下：



clf_programing
关注
专栏目录
React Native在Android平台运行gif的解决方法
xiangzhihong8的专栏
02-19 5780
概述目前RN在Android平台上不支持gif格式的图片，而在ios平台是支持的，期待以后的版本中系统也是可以默认支持Android的。首先说下在ios平台怎么加载gif呢？ <Image source= {require('./img/loading.gif')} style = {styles.loading}/> 完整实例：xport default class Loading extend
React Native图片资源使用方案
...
04-02 1485
图片资源（ jpeg、png、svg、webp ... ）作为与用户交互的界面元素，在客户端产品中起到了非常重要的角色作用。在应用开发中，移动端与PC的图片使用策略也有所不同。PC端较大的内存容量，快速的渲染能力使各类型图片资源都能得到较好的使用。而移动端由于设备内存，GPU渲染都与PC有较大差别，所以在App应用开发中，需要我们单独分析处理。今天我们聊聊在React Native开发中，如...
react-native使用gif图片在安卓系统下不动的解决方法
A_xiaomingming的博客
05-07 2994
只需要在android/app/build.gradle 中的dependencies中添加// For animated GIF support compile 'com.facebook.fresco:animated-gif:0.13.0'然后用&lt;Image source={require(‘./image.gif’)} &gt;&lt;/Image&gt; 使用该gif图就可以了。...
react-native android之配置gif图片
01-05
react-native 中对使用gif动态图片的配置，以及查看对应的版本信息，解决冲突。非常实用，欢迎下载！
react native gif支持
caoyangyang123的博客
06-06 2787
众所周知react native android添加gif图片显示支持,需要添加一个依赖包com.facebook.fresco:animated-gif:0.11.0之前一直使用的 0.11.0 ,最近react native 更新到0.44之后发现,总是会奔溃 报异常java.lang.NoSuchFieldError经过我的多次验证发现版本改成0.13.0即可com.facebook.
react-native 之android 配置gif图片的使用----------小白的天堂
Mr.wang的博客
01-05 3291
React-native显示动态图片（gif）的配置 突然心血来潮，想把项目中的loading效果换成动态图片的样式，这样会好看一些不会那么单调。然后开始了我的踩坑之路。。。。 首先，查看官方网站（react-native中文网），然后选择对应自己的版本号的文档 我的是0.50的版本，然后找到Image，查看了一下，   Android 如果要至支持gif图片需要添加依赖，然后按...
《React-Native系列》21、 解决RN在Android下不支持gif问题
等待就是浪费青春
08-22 6210
由于RN在Android平台上不支持gif格式的图片，今天介绍下我们是怎么处理这个问题的。 先来看看我们需要实现的效果，这是一张gif图片，当我们列表上拉加载下一页的时候需要使用这个效果，如下图： 我们的解决方案是：将gif切成15长png的图片，暂且命名为loading1、loading2.... loading15 然后循环的setState修改图片，就像看电影一样，达到
React Native 性能优化指南【全网最全，值得收藏】
卤蛋实验室
01-09 1529
原文链接：https://juejin.im/post/5e1676e16fb9a04847095b12 2020 年谈 React Native，在日新月异的前端圈，可能算比较另类了。文章动笔之前我也犹豫过，但是想到写技术文章又不是赶时髦，啥新潮写啥，所以还是动笔写了这篇 React Native 性能优化的文章。 本文谈到的 React Native 性能优化，还没到修改 React Nat...
《React-Native系列》34、 ReactNative的那些坑
等待就是浪费青春
09-24 6503
梳理了下ReactNative中的一些坑，你踩没踩过，它就在那里。1、fetchfetch没有提供超时时间，设置timeout貌似没有作用。标红的地方不能调用response.json() 或 .text()方法，哪怕是通过console.log()输出也不行，如果想查看数据，只能alert。2、Image标签使用本地资源图片的时候需要制定宽度和高度，使用网络资源没有限制。3、Text标签iOS下
react-gifs:对GIF做出React的工具
05-13
ReactGIF 一组用于GIF渲染的React工具 特征 小：仅4.99 KB压缩代码 模块化：使用您需要的挂钩和组件 快速：使用网络工作者进行解析 入门 npm install @react-gifs/tools import { useWorkerParser , usePlayerState , usePlayback , Canvas } from "@react-gifs/tools" ; const Gif = ( src ) => { // default state const [ state , update ] = usePlayerState ( ) ; // load and parse gif useWorkerParser ( src , update ) ; // updates current index usePlaybac
react-native-fast-image
08-03
总的来说，`react-native-fast-image` 提供了一个强大的解决方案，解决了React Native原生图片组件在性能上的不足，使得开发者能构建出更加流畅、响应更快的移动应用。对于那些对用户体验有高要求，特别是包含大量...
6.React Native基本组件介绍；
Tiger的专栏
01-16 920
目录 1.View(容器) 2.TouchableOpacity(触摸控件) 2.1TouchableOpacity实现原理 2.2常用属性 2.3触摸事件监听 3.Text 3.1Text介绍 3.2常用属性 3.3常用的样式Style 4.Image 4.1Image介绍 4.2图片加载方式 4.3常用属性 4.4常用的监听事件 4.4方法 5.TextInpu...
Android下使用react-native-splash-screen加载gif
Napchencw的博客
06-08 350
react-native-splash-screen在github中只提到加载png图片，要加载gif，需借用Android第三方库直接在布局文件中加载gif。 首先在build.gradle文件中添加组件 implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.1' 其次，在布局文件中将ImageView替换成pl.droidsonroids.gif.GifImageView <?xml version="1.0" .
react native项目android动图展示
最新发布
wuxiaodi00的博客
06-06 137
如果动图不能动 进入android文件夹 运行./gradlew -q app:dependencies。首先 在android/app/build.gradle文件中配置。根据提示展示修改版本 重新启动即可。
React-Native 在android写不支持gif
xnllc的专栏
03-14 424
在android/app/build.gradle中的dependencies字段中添加： compile 'com.facebook.fresco:animated-gif:0.13.0'
React Native Gif图插件封装
...
04-23 2064
React Native Gif图插件，已在Github开源，猛戳: react-native-gifview关于如何封装原生组件的教程，可以参考我之前的文章：React Native 封装Android原生组件最详教程功能支持：加载、播放、暂停等。  一、配置【 Android 平台配置 】1. 将android_gifview文件夹拖入android工程包名目录下，例如 com.xxx。2. ...
react-native 0.62支持gif动图
宏斌的博客
05-23 1770
看了一些android支持动图的博客都是添加配置，问题就是要求的版本不对应，试了很多回后发现了对应0.62版的配置 implementation 'com.facebook.fresco:animated-gif:2.0.0' 解决这个问题其实也很意外，试了一个2.2版本的报错了，报错中显示： 虽然我看不懂，但是直觉告诉我，就是它了， 果不其然改成了2.0.0就可以了，老八动起来了 奥力给干了兄弟们 ...
react-native安卓（android）加载 gif 解决 办法
hopefullman的博客
12-19 1930
看了网上很多关于这个react-native-android加载gif的文章，感觉其实不难搞，做了一个试试，没成功，即使成功了加载时候可能出现自动退出app的情况 于是决定，休息一会......休息好了我又搞了一遍.....成了.......下面贡献代码... 我是新建了一个react-native-android空白项目成功加载了gif图片 android/app/build.gradle...
React Native 技术难题与解决方案
以下是一些常见的React Native疑难杂症及其解决方案。 1. **ScrollView问题**： 在React Native中，`ScrollView` 是一个常用的滚动视图组件，它允许用户在内容超出屏幕时进行滚动。在Android和iOS平台上，`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值