React-Native工程,使用AC-QRCode-RN插件导致其他页面的InteractionManager方法不被执行

ACQRCodeRN高度可定制的ReactNative二维码扫描组件 AC-QRCode-RN:高度可定制的React Native二维码扫描组件 立即下载

现象

同事在项目中需要扫描二维码的功能,使用了AC-QRCode-RN(github地址)这个插件,在扫描二维码界面调用该插件之后发现,进入其他页面之后,其他页面中的InteractionManager.runAfterInteractions方法都无法执行了。

发生原因

Interactionmanager的作用是可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。
基于这个判断,我们怀疑,虽然扫描二维码页面退出了,但是动画仍然在运行。
我查看了AC-QRCode-RN(github地址)这个插件的代码,发现了如下代码:

scannerLineMove() {
    this.state.animatedValue.setValue(0);  //重置Rotate动画值为0
    Animated.timing(this.state.animatedValue, {
        toValue: this.props.rectHeight,
        duration: this.props.scanBarAnimateTime,
        easing: Easing.linear
    }).start(() => this.scannerLineMove());
}

这是一个循环调用的动画效果,即使页面退出,这个动画也不会结束。

解决方案

在页面中声明一个本地变量,初始化是设置为false,当componentWillUnmount方法被回调时将该变量设置为true,在运行这个动画时,判断该变量的值,当为true时退出,关键代码如下所示:

# AC-QRCode-RN 中的 QRScanner.js 文件
let isClosed = false;
...
省略若干代码
...
componentWillUnmount() {
    isClosed = true;
}
...
省略若干代码
...
scannerLineMove() {
    if (isClosed) {
        return;
    }
    this.state.animatedValue.setValue(0);  //重置Rotate动画值为0
    Animated.timing(this.state.animatedValue, {
        toValue: this.props.rectHeight,
        duration: this.props.scanBarAnimateTime,
        easing: Easing.linear
    }).start(() => this.scannerLineMove());
}
Python 批量处理大量压缩包|递归嵌套解压 zip rar 7z tar,文件名乱码修复,扫描残留压缩包工具 在收集大量计算机源码时,经常遇到海量多层嵌套压缩包:zip、rar、7z、tar、tar‑gz 混杂,老压缩包中文文件名 GBK 编码解压出现乱码,解压完成后不确定目录内是否还有遗留未解压的压缩包。 本工具集由 3 份 Python 脚本组成,专门针对大批量源码文件夹做自动化预处理,不用手动一个个解压,自动递归遍历所有子目录,处理嵌套压缩包,修复中文文件名乱码,扫描校验残留压缩包,输出完整处理日志。 前置条件 - Python3.8 及以上环境 - 如果要处理 rar/7z 格式:电脑安装 **7‑Zip**,记录 7z.exe 的完整路径,填到 `jieyarar.py` 配置区。 1. 修改每个脚本顶部配置区:`SCAN_ROOT / TARGET_FOLDER` 修改为你存放文件的根目录绝对路径(Windows 路径字符串前面加 r,例如 `r"F:\files\download"`) 2. 第一步:运行 `main.py`,优先处理全部 zip 压缩包,执行完成查看生成的 `unzip_log.txt` 日志; 3. 第二步:运行 `jieyarar.py`,处理 rar、7z、tar 等其它格式压缩包,查看 `unpack_all_archive_log.txt`; 4. 第三步:运行 `checkfiel.py`,全盘扫描校验,输出 `scan_archive_and_badname.txt`; - 查看报告:确认是否还有残留压缩包、是否存在乱码文件名; 5. 根据日志,手动单独处理加密、损坏的压缩包。 立即下载

相关推荐

DAX Studio--导出PowerBi数据---(不使用复制表如何快速导出csv文件 / 如何导出百万级/千万级乃至亿级的数据量)多图预警!

多图预警! 1、打开Dax 点击Connect 2、在这里选择正在打开的PowerBi文件,点击Contect 3、选择导出方式--File F、输入指令(输入 EVALUATE ' )单引号可以进行快速提示 5、点击Run 6、选择文件路径,以及保存类型等(一般情况下,我们常用的类型是 txt 或者 第一种 UTF-8 的csv 文件),点击保存即可,稍等片刻,导出完成! 7、导出完成,我这里总计是39W 行的数据量,约20+ 秒完成 ...

STR_Liang的博客 8158

InteractionManager.runAfterInteractions 手势左滑退出后 不再触发回调

前面一篇文章Navigator 过渡动画卡顿的解决方案,提到了 InteractionManager.runAfterInteractions这个解决方案。 InteractionManager Interactionmanager可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证JavaScript动画的流畅运行。 应用这样可以安排一个任务在交互和动画完成之后执行: ...

huch的博客 3417

开发基于GDL235KBQ6开发板的IAP升级程序(HEX协议+串口空闲中断 + DMA接收数据)

使用GDL235kB开发板,实现串口iap升级程序的bootloader代码编写,app为led灯闪烁,并完成通信c代码

zhaozijuncc的博客 642

React Native QR Code 生成器项目常见问题解决方案

React Native QR Code 生成器项目常见问题解决方案 该项目是一个React Native的二维码生成器和检测器,主要使用JavaScript语言编写。以下是针对新手在使用这个项目时可能遇到的三个常见问题及其解决步骤。 1. 安装问题 问题现象 新手可能会在安装rn-qr-generator时遇到问题,导致无法正常使用。 解决步骤 确保你的React Native环境已经正确设置...

gitblog_00229的博客 1056

SkillWeaver:自主进化的Web智能体框架,通过技能发现与组合实现能力迭代——让AI像人类一样“学习-实践-积累”,构建可扩展的技能库

SkillWeaver重新定义了Web智能体的“学习-实践”循环,使其从被动执行者进化为主动进化者。通过技能的持续积累与组合,智能体不仅能应对已知任务,更能探索未知场景,为自动化与AI的深度融合开辟了新路径。随着框架的成熟与社区的扩展,我们或许正见证着下一代智能体基础设施的诞生。传统Web机器人(Web Agents)依赖预设脚本或静态规则执行任务,但面对动态变化的网站结构、复杂交互逻辑时,其能力边界明显。的闭环机制,使智能体能像人类学习技能一样,不断扩展自身能力,适应新场景。

这里汇聚了前沿的技术分享与实用的开发技巧,带你探索从创意到企业的技术创业之路。 320

【Matlab】飞行器气动弹性仿真与分析

气动弹性是飞行器设计领域的核心交叉学科,融合了空气动力学、结构动力学和控制理论,主要研究飞行器结构在气动力作用下的弹性变形、振动响应及相互耦合规律,直接影响飞行器的飞行稳定性、操纵性和结构安全性。随着飞行器向高速度、高机动性、轻量化方向发展,气动弹性问题愈发突出,如颤振、发散、嗡鸣等现象,严重时会导致飞行器结构破坏甚至飞行事故,因此气动弹性仿真与分析已成为飞行器设计、验证和优化的关键环节。当前,飞行器气动弹性仿真面临诸多技术挑战:气动力与结构变形的强耦合特性难以精准描述,易出现仿真误差;

unber的博客 233

React Native 交互管理器InteractionManager

一个可以提升用户体验和交互效果的模块InteractionMnager(交互管理器) 一、基本内容 使用InteractionManager可以让一些耗时的任务在交互操作或者动画完成之后进行执行,这样使用可以保证我们的JavaScript的动画效果可以平滑流畅的执行。可以大大提升用户体验。比如:导航的转场动画 对大多数React Native应用来说,业务逻辑是运行在JavaScript...

https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e 5232

示波器核心参数选型指南:带宽、采样率与嵌入式调试实战

示波器是电子工程师进行信号观测与故障诊断的基础仪器,其性能由带宽、采样率、通道数、存储深度、触发系统和探头特性共同决定。带宽定义高频响应边界,需遵循5倍法则以保障数字信号上升沿测量精度;采样率则依据奈奎斯特定理并结合工程冗余(通常≥2.5×带宽)实现可靠时域重建。二者协同影响信号完整性评估能力,尤其在UART、I²C、SPI等嵌入式总线调试中至关重要。高存储深度支持长时捕获与毛刺定位,智能触发与硬件协议解码进一步将波形分析升维至语义级。本文围绕真实嵌入式场景,解析参数间的耦合关系与典型误用陷阱。

weixin_42588877的博客 91

React Native QR码生成与识别库

React Native QR码生成与识别库 本文将为您介绍一个开源项目:rn-qr-generator,这是一个用于在React Native应用中生成和识别QR码的库。该项目主要使用JavaScript编程语言,同时也涉及Java、Objective-C等其他语言。 基础介绍 rn-qr-generator 是一个功能强大的二维码生成和识别库,支持在React Native应用程序中轻松创建和...

gitblog_00054的博客 515

面向企业级应用的 SAP UI5 troubleshooting 全景指南:从日志与调试到性能与可测试性

本指南系统化介绍了SAP UI5应用排错的完整流程和工具链。从基础的浏览器开发者工具使用,到SAP UI5专用调试工具(Technical Information Dialog、Support Assistant、Diagnostics Window),再到性能优化和日志管理,提供了一套工程化的解决方案。重点推荐组合使用UI5 Inspector扩展、Test Recorder测试工具以及性能测量模块,并强调将常见问题整理成团队知识库。通过制度化的排错步骤和工具组合,开发者可以快速定位、复现和修复问题,将调

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 282

基于 transformer、lstm、LSTM多特征的交通流量预测 完整数据代码 超全项目 本科硕士毕设卓卓有余

基于 transformer、lstm、LSTM多特征的交通流量预测 完整数据代码 超全项目 本科硕士毕设卓卓有余

4655

探索未来科技:rn-qr-generator - 轻松构建和识别二维码的React Native库

探索未来科技:rn-qr-generator - 轻松构建和识别二维码的React Native库 rn-qr-generator是一个强大的React Native模块,使开发人员能够在iOS和Android应用程序中方便地生成和检测二维码。这个开源项目是快速集成二维码功能的理想选择,无论你是初学者还是经验丰富的开发者。 项目介绍 rn-qr-generator将复杂的二维码生成和解析过程简化为...

gitblog_00083的博客 591

【TC3xx芯片】TC3xx芯片看门狗复位的默认行为分析

TC3xx芯片看门狗复位的默认行为分析

qq_36056498的博客 350

ReactNative入门(安卓)——API(上)

Alert - 弹窗 通过 Alert.alert() 方法调用唤起原生弹窗,点击会触发 onPress 回调(参考下方代码)并清除弹窗。 import React, { AppRegistry, Component, StyleSheet, Alert, Text, View } from 'react-nati...

dcof99817的博客 287

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

rn 动画Android卡顿,React-Native Navigator 过渡动画卡顿的解决方案

在RN0.44版本之前,路由导航跳转几乎是使用的是Navigator组件,在0.44版本以后就不推荐使用了,官方推荐的是react-navigation,当然还是可以在废弃的库中找到:import { Navigator } from 'react-native-deprecated-custom-components'首先Navigator动画是由Js线程(单线程特点)控制。我们来脑补一下“从右...

weixin_42292348的博客 895

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

React-Native开发遇到各类问题、各类坑汇总问题及解决办法(不断更新中)

Application XXX has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent. #### 解决办法: 问题出现是服务没有开启,进入到项目目录启动服务,代码如下: reac

金 8695

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

ReactNative 遇见的坑

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34306593的博客 191

关于react native 循环动画无法使用InteractionManager的解决办法

最近react native项目中的首页有一个跑马灯的需求,即在轮播图的下方有一个公告,文字能够从左到右循环滚动;于是借助开源的力量,使用了github中的一个module: https://github.com/cheng-kang/react-native-lahk-marquee-label-vertical使用如下命令导入npm: npm install --save reac

Xiongtm的博客 3071

ReactNative 加载网络数据界面卡顿

ReactNative 在进入新的界面,同时需要在新界面加载网络数据的时候有卡顿的现象,导致界面加载不流畅。本来以为是网络加载完成后再次渲染界面导致的。然后就想了一个办法,延迟加载数据 setTimeout(this._loadData,500) 结果还可以,但是如果有 loadingDialog 之类的东西会有一种延迟的感觉,而且写法感觉也不专业。所以百度科普了一下,ReactNative 里面有个专门管理交互的管理者: InteractionManager 在这个类里面有个方法 ru..

MusicCannon的博客 922

RN中的几种定时器

第一类,加入定时器中的任务可能会延迟当前正在进行的动画。 1、setTimeout, clearTimeout 2、setInterval, clearInterval 3、setImmediate, clearImmediate 4、requestAnimationFrame, cancelAnimationFrame 使用:在需要的地方或者在componentDidMount 中用前面

风继续吹 5792

【网上摘录】React Native APP性能优化

  1、JS的单线程   所有的事件处理,API请求,等操作都在这个线程上,在this.setState大量数据时,状态的变动会导致re-render,这期间所有由JavaScript 控制的动画都会出现卡顿掉帧。   比如在切换路由时,帧数会有明显抖动。此时如果有一些在componentDidMount执行的操作就会使得路由过渡动画非常卡顿。   2、开发环境性能比生产环境差   开发环境下...

Landen2011的博客 234

RN 使用react-native-qrcode生成二维码

生成二维码经常需要,分享一个插件react-native-qrcode 先npm install下,然后引用即可 npm install react-native-qrcode --save import QRCode from 'react-native-qrcode'; 一个demo:   import React, { Component } from 'react' imp...

GarenWang的博客 3844

React-Native中二维码扫描使用

1、简介使用的是AC-QRCode-RN,github地址https://github.com/MarnoDev/AC-QRCode-RN/blob/master/README_CN.md 通过 react-native-camera 这个库实现使用摄像头实时扫描二维码进行解析的功能。2、特性 支持扫描二维码、条形码 支持 Android 和 iOS 系统 基于 react-native-came

YanceChen2013的博客 4671

自定义 React Native 二维码扫描组件(简单,易用!)

本文为 Marno 原创,转载必须保留出处!公众号 aMarno,关注后回复 RN 加入交流群简书专题《 React-Native 开发阵营 》,欢迎关注和投稿React Native 优秀开源项目大全:http://www.marno.cnhttp://www.jianshu.com/p/347ccf787d62 1.前言 最近用 React Native 仿写了一下 o

大灰狼的小绵羊哥哥的博客 1万+

RN-性能优化 (三)

前人种树后人乘凉 原文地址 你需要了解什么是帧 在你的祖父辈,它们一般把视频称为”移动的图片”的一个原因是:视频中逼真的动作是以固定的速度,快速改变静态的图片创造出来一个错觉。这里的每一个图片就一个是帧。每一秒中图片的数量(帧),它直接影响了视频的真时性(或者app中的用户界面). iOS的设备是每秒60帧。它也就给了你以及UI系统大约16.67毫秒的时间,来完成生成一张静态图片

大灰狼的小绵羊哥哥的博客 1218
上一篇: 解决flex布局导致图片变形
下一篇: JavaScript DOM(一)--页面加载完成事件与获取元素节点
kylin_zd
博客等级 码龄12年 12粉丝 24原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值