关于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 ,让页面跳转动画完成后,再加载子页面的内容,以保证动画能流畅运行;
但是如果某一个动画一直执行,InteractionManager 就会一直等待动画执行完毕才会执行!

起初我的解决方法是:

点击页面跳转按钮的同时,用DeviceEventEmitter的方式告诉跑马灯,调用stop()方法让其先暂停动画,这样就不得不把github中的源码扒下来自己修改,改动非常大,非常麻烦。比如暂停的同时要记录当前跑马灯动画已经播放的时长,继续播放的时候要重新设置跑马灯的 duration 为动画总时长减去已经播放的时长,否则,呵呵。。。。你的跑马灯在一个动画周期内,多次暂停和继续后,动画速度会越来越慢!!

多少天后,无意中在网上看到一个相似案例,其解决方式是在动画中添加属性:

isInteraction: false
一句代码完美搞定!然而这个属性在react native官网并没有说明!!然而我们都明白了,InteractionManager会忽略加了
isInteraction: false
属性的动画继续执行自己的耗时任务 。

这真是一个坑!以此博文致年轻的react native


0 0