react-native0.61插入动图无效的问题（Android）

最新推荐文章于 2024-01-22 15:02:04 发布
最新推荐文章于 2024-01-22 15:02:04 发布
阅读量472 收藏
点赞数 1
文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pluto_ooooo/article/details/105375435
版权

写代码的过程中发现插入的动图没生效，和静态图片一样。所以百度了一下教程，但还是没用。最后知道是因为react-native版本不同，所以配置语句也不同。附上官方文档说明：https://reactnative.cn/docs/image#%E5%9C%A8-android-%E4%B8%8A%E6%94%AF%E6%8C%81-gif-%E5%92%8C-webp-%E6%A0%BC%E5%BC%8F%E5%9B%BE%E7%89%87

1.打开android/app/build.gradle,在dependencies中添加下面的语句：

 implementation 'com.facebook.fresco:animated-gif:2.0.0

2.重新运行项目就可以啦

react-native run-android
ch-aoch-ao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native android之配置gif图片
01-05
react-native 中对使用gif动态图片的配置，以及查看对应的版本信息，解决冲突。非常实用，欢迎下载！
react-native-modal-datetime-picker：适用于Android和iOS的React-Native datetime-picker
01-30
$ npm i react-native-modal-datetime-picker @react-native-community/datetimepicker # using yarn $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker 请注意， @react-...
react-native使用gif图片在安卓系统下不动的解决方法
A_xiaomingming的博客
05-07 2968
只需要在android/app/build.gradle 中的dependencies中添加// For animated GIF support compile 'com.facebook.fresco:animated-gif:0.13.0'然后用<Image source={require(‘./image.gif’)} ></Image> 使用该gif图就可以了。...
React-Native 在android不支持gif图 -- 解决方案!（转）
White feathe 的博客
05-04 2176
解决方案：只需要在android/app/build.gradle中的dependencies字段中添加：compile 'com.facebook.fresco:animated-gif:0.13.0'然后重新跑一下react-native run-android命令就可以了！如下图所示：转载地址：http://www.cnblogs.com/zhiyingzhou/p/6076204.html
ReactNative中安卓上加载图片遇到的问题
weixin_45672971的博客
09-24 430
问题描述： 在RN中，首次进入页面或清空缓存后，点击TouchableOpacity中包裹的图标进行图标切换操作（已经将动画效果去掉，通过标识判断该显示哪一张图片），图标还会出现动画效果，并且只有第一次会出现，但图标切换一个遍后，动画就会消失恢复正常。 原因分析： 只有安卓中第一次进入页面和清空缓存的情况下才会发生这种情况，盲猜是安卓缓存机制的原因，点击的时候才回去加载应该显示的那张图片，导致出现一次动画效果，而再次点击就没有这个问题。 解决方案： 提前加载图片，在要切换的图标前面将所有的图
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...
react-native-detect-navbar-android:React Native模块，告知android设备是否具有软导航栏
05-28
react-native-detect-navbar-android 检测Android设备的软导航栏，以便您知道哪个具有物理键（Home，Back，Menu），而哪些没有。 注意：该项目仅适用于Android，如果您使用它来检测软键是否被隐藏，它将无法正常...
适用于 Android 和 iOS 的 React Native NFC 模块 react-native-nfc
05-28
灵感来自phonegap-nfc和react-native-ble-manager 该库最简单（也是最常见）的用例是读取NFC包含 的标签NDEF，可以通过以下代码实现： import React from 'react'; import {View, Text, TouchableOpacity, ...
react-native-device-brightness:ReactNative iOS 和 Android 的屏幕亮度调整工具
05-29
react-native link react-native-device-brightness 使用旧版本的React Native 您需要 （npm install -g rnpm） rnpm link react-native-device-brightness 嘿哥们儿！ react-native-device-brightness尚不支持...
react native android加载gif的问题
qq_33539839的博客
10-22 304
做过react native开发的应该都了解，就是gif资源在未经设置的情况下无法在android机上展示出来，而iOS是支持加载gif的。 所以第一次遇到这个问题时，也是困扰了一阵，经本人亲测有效的方法： 在android/app/build.gradle文件中的dependencies中添加如下两行代码： implementation "com.facebook.fresco:anim...
react-native配置支持gif报错
【03】的博客
11-29 260
react-native中 默认不支持webp，gif图，根据官方文档，可知添加配置项 添加配置 添加配置完后启动报错 解决： 执行命令 cd android 执行命令 gradlew clean 启动，正常 配置项改变之后如果报错，记得clean一下 ...
记录react-native0.61.5中使用ART绘制动画时遇到的坑
pluto_ooooo的博客
04-14 639
想在APP中加入动画，类似于剩余电量和剩余时间，有波浪飘动的感觉，百度到一篇教程，https://www.jianshu.com/p/9ceb9556a4e3，在此感谢博主。 但是我使用的时候import {ART} from 'react-native’的时候报错，错误忘记记录了，大体意思就是ART试图导出两个相同名称的组件，以为是我的引用方法有错误。后来才知道是因为rn升级之后ART已经不再核...
react native由0.56升级到0.61.5版本之后，关于加载gif图片资源出现的问题
qq_33539839的博客
05-06 787
react native由0.56升级到0.61.5版本之后，关于加载gif图片资源出现的问题： 1.同一个Image组件在iOS上加载资源，先加载gif，再替换成加载静态图片，UI显示依然为gif的问题： 由于在未升级之前，未出现此问题，但升级之后在iOS平台发现无法正常的由gif资源替换到静态图片。经过多次测试验证，确认代码逻辑无误，使用Image组件就会出现gif图片始终占位在原处，最后...
Fresco的使用
qq_43677688的博客
03-16 198
步骤 找到build.gradle(Modlue:app) 导依赖 implementation ‘com.android.support:support-v4:28.0.0’ implementation ‘com.facebook.fresco:fresco:0.12.0’ implementation ‘com.facebook.fresco:animated-gif:0.12.0’ im...
React-Native项目矢量图标库（react-native-vector-icons）
mapbar_front的博客
01-22 1556
在一个前端的工程项目中，一个必不可少的功能就是图标库的使用。相比于图片，矢量图标库，有容积小，不失真，减少资源加载等优秀特性。
ReactNative 使用矢量图标 react-native-vector-icons
luolin2611的博客
07-11 4503
一、概述    矢量图标的好处是：可以自定义图标大小，颜色，这样解决了指定死图标的灵活性。但是跨平台应用开发中，ReactNative不像Ionic那样自带矢量图标，针对这问题，引出RN插件 react-native-vector-icons。    GitHub地址：https://github.com/oblador/react-native-vector-icons    废话不多说开始配置...
ReactNative图标库 _ react-native-vector-icons 配置和使用
灵魂和肉体总要有一个在路上
11-20 2759
图标库地址 https://github.com/oblador/react-native-vector-icons 步骤一：下载图标库 //要是安装报错，就再执行一次 npm install --save react-native-vector-icons 步骤二：在android/app/build.gradle引入配置 project.ext.vectoricons = [ iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]
react-native-vector-icons实现在react-native项目优雅的使用阿里图标
weixin_43840341的博客
08-06 1179
又是一个react-native踩坑日常，今天说说如何在react-native中优化的使用阿里图标库。 首先请求今天的两个主角 1、阿里巴巴矢量图标库 2、react-native-vector-icons 初始化一个react-native项目 npx react-native init iconTest --template react-native-template-typescript 安装react-native-vector-icons npm install --save
react-native svg动图
最新发布
06-04
React Native提供了许多用于处理SVG图形的库，其中最流行的是react-native-svg。这个库支持SVG图形的渲染和动画效果，并且提供了很多方便的API来操作SVG图形，比如Path、Circle、Rect等等。 使用react-native-svg，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值