立诚勿怠,格物致知
It's all about connecting the dots

React Native中的InteractionManager

React Native中的InteractionManager允许你在交互/动画执行完毕后再执行计划中的耗时任务。InteractionManager的作用尤其体现在可以让JavaScript动画更流畅的运行。

App可以通过下面这种方式来将耗时任务安排在交互完成之后执行:

InteractionManager.runAfterInteractions(() => {
  // ...耗时的同步任务(long-running synchronous task)...
});

将它与其他类似的方法进行一个对比:

  • requestAnimationFrame():用于绘制一次动画;
  • setImmediate/setTimeout():延后执行代码,注意这可能会延迟动画;
  • runAfterInteractions():延后执行代码,这不会延迟当前处于活动状态的动画。

触控系统会将单点或多点触控视为一个“交互”(interaction),然后在等到所有触控都结束会被取消后再执行runAfterInteractions()回调函数。

InteractionManager也允许app在动画开始时通过创建交互“句柄”(interaction “handle”)来注册动画,然后在动画结束后清除该句柄。就像下面这样:

var handle = InteractionManager.createInteractionHandle();
// run animation... (`runAfterInteractions` tasks are queued)
// later, on animation completion:
InteractionManager.clearInteractionHandle(handle);
// queued tasks run if all handles were cleared

runAfterInteractions方法的入参可以是一个简单的回调函数,也可以是一个PromiseTask对象(该对象需要有一个返回Promise的gen方法)。如果入参是一个PromiseTask对象,那么这个任务(task)彻底完成(这里的彻底完成,是指这个任务代码中涉及到的异步代码里通过runAfterInteractions产生的其他任务也都完成)后才会执行任务队列中的后续任务。

默认情况下,队列中的任务会一次性地在setImmediate方法中通过一个循环全部执行掉。如果你调用setDeadline方法并传入一个正数,那么这些任务就会在指定的时间到达后再执行(借助setTimeout方法实现),这样就会阻塞队列中剩下的任务,并能够给触摸交互留出操作时间,好让app能更好地响应用户。

方法:

static runAfterInteractions(task)

待所有交互都完成后再执行给定的函数。该方法会返回一个可以取消的“promise”。

static createInteractionHandle()

通知管理器交互已经开始了。

static clearInteractionHandle(handle)

通知管理器交互已经结束了。

static setDeadline(deadline)

若入参为正数,会使用setTimeout来在eventLoopRunningTime达到指定时间(入参)后开始执行任务。若入参不是正数,则所有任务都会在setImmediate方法中一次性批量执行掉(默认行为)。

属性:

Events: CallExpression

addListener: CallExpression

参考:
  • https://facebook.github.io/react-native/docs/interactionmanager.html
赞(0) 打赏
文章名称:《React Native中的InteractionManager》
文章链接:https://www.orzzone.com/interactionmanager-in-react-native.html
商业联系:yakima.public@gmail.com

本站大部分文章为原创或编译而来,对于本站版权文章,未经许可不得用于商业目的,非商业性转载请以链接形式标注原文出处。
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册