关于react native 循环动画无法使用InteractionManager的解决办法
来源:互联网 发布:热血传奇免费挂机软件 编辑:程序博客网 时间:2024/05/23 21:46
最近react native项目中的首页有一个跑马灯的需求,即在轮播图的下方有一个公告,文字能够从左到右循环滚动;于是借助开源的力量,使用了github中的一个module:
https://github.com/cheng-kang/react-native-lahk-marquee-label-vertical使用如下命令导入npm:
npm install --save react-native-lahk-marquee-label
使用也比较简单,起初用着感觉很爽:
<View class="marquee-label"> <View class="marquee-label-text-container"> <Text class="marquee-label-text">{text}</Text> </View></View>
然而到后面问题来了:InteractionManager 使用出现问题!
InteractionManager 是react native性能优化第一个策略:可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证JavaScript动画的流畅运行。应用这样可以安排一个任务在交互和动画完成之后执行:
InteractionManager.runAfterInteractions(() => { // ...耗时较长的同步的任务...});
但是如果某一个动画一直执行,InteractionManager 就会一直等待动画执行完毕才会执行!
起初我的解决方法是:
点击页面跳转按钮的同时,用DeviceEventEmitter的方式告诉跑马灯,调用stop()方法让其先暂停动画,这样就不得不把github中的源码扒下来自己修改,改动非常大,非常麻烦。比如暂停的同时要记录当前跑马灯动画已经播放的时长,继续播放的时候要重新设置跑马灯的 duration 为动画总时长减去已经播放的时长,否则,呵呵。。。。你的跑马灯在一个动画周期内,多次暂停和继续后,动画速度会越来越慢!!
多少天后,无意中在网上看到一个相似案例,其解决方式是在动画中添加属性:
isInteraction: false一句代码完美搞定!然而这个属性在react native官网并没有说明!!然而我们都明白了,InteractionManager会忽略加了
isInteraction: false属性的动画继续执行自己的耗时任务 。
这真是一个坑!以此博文致年轻的react native
0 0
- 关于react native 循环动画无法使用InteractionManager的解决办法
- react-native InteractionManager
- React-Native工程,使用AC-QRCode-RN插件导致其他页面的InteractionManager方法不被执行
- react-native无法显示图片的解决办法
- 关于React native reload还是原来界面的解决办法
- react-native动画的坑
- React-Native项目中使用动画-Animated
- 关于React-Native的生命周期
- React Native关于TabBar使用自定义矢量位图的流程
- React Native 学习笔记四(关于state的使用)
- React Native 学习笔记五(关于样式的使用)
- React Native 学习笔记七(关于布局的使用)
- React Native动画的锚点anchorPoint
- React Native之npm ERR! 无法安装依赖包的解决办法
- React Native 之 动画
- 详解React Native动画
- 详解React Native动画
- [React Native]动画-LayoutAnimation
- nginx命令
- SQLServer2008数据库分离与附加
- MongoDB 3.4 分片与副本集实践笔记
- java问题:不要在nextByte()、nextShort()、nextInt()、nextLong()、nextFloat()、nextDouble()、next()之后使用nextLine()
- git学习:关于origin和master
- 关于react native 循环动画无法使用InteractionManager的解决办法
- javascript 时间格式化
- 《难经注》之十五难
- 基于Tensorflow的用MNIST手写数字做图像检索
- 线程与进程,多线程,多进程,线程并发,线程并行
- E: dpkg 被中断,您必须手工运行 sudo dpkg --configure -a 解决此问题 .
- JavaScript中的闭包、匿名函数
- 山东理工大学第七届ACM校赛-G 飞花的传送门
- 关于Struts框架中的拦截器之极其不解