React Native 模块之 InteractionManager(交互管理器) 详解

江清清
2,708 阅读3分钟

尊重版权,未经授权不得转载

本文来自:江清清的技术专栏(www.lcode.org)

(一)前言

今天我们主要看一个可以提升用户体验和交互效果的模块InteractionMnager(交互管理器)

刚创建的React Native交流七群:131537844,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)基本内容        

使用InteractionManager可以让一些耗时的任务在交互操作或者动画完成之后进行执行，这样使用可以保证我们的JavaScript的动画效果可以平滑流畅的执行。可以大大提升用户体验。

在应用开发中我们可以如下进行执行任务

InteractionManager.runAfterInteractions(() => {

  //执行耗时的同步任务

});

该模块和其他相关的调度方法对比:

  • requestAnimationFrame():执行控制动画效果的代码
  • setImmediate/setTimeout():设置延迟执行任务的时间，该可能会影响到正在执行的动画
  • runAfterInteractions():延迟执行任务，该不会影响到正在执行的动画效果

触摸系统中的单点或者多点触控都是交互动作，耗时任务会在这些触摸交互动作执行完成之后或者取消以后回调runAfterInteractions()方法进行执行。

InteractionManager也允许应用在动画开始的时候通过createInteractionHandle()方法注册动画生成一个句柄，在结束的时候清除该句柄。

var handle = InteractionManager.createInteractionHandle();

//执行动画 (`runAfterInteractions` tasks are queued)

//动画执行结束

InteractionManager.clearInteractionHandle(handle);

//动画清除之后，开始直接runAfterInteractions中的任务

runAfterInteractions任务也可以接收一个普通的回调函数或者一个带有gen方法并且返回一个Promise的PromiseTask对象。如果参数是PromiseTask对象，那么任务是异步执行的，也会阻塞。该会等着当前任务执行完毕以后才能执行下一个任务。

默认情况下，队列任务会一次性在setImmediate方法中批量执行。如果你通过setDeadline方法设置一个时间值，那么任务会在延迟该设定值时间进行执行。这时候会调用setTimeout方法进行挂起任务并且阻塞其他任务的执行。这样可以给触摸交互等操作留出时间更好的相应用户操作。

(三)方法与属性
  1.  runAfterInteractions(task)  静态方法,在用户交互和动画结束以后执行任务
  2. createInteractionHandle() 静态方法，创建一个句柄(处理器)，通知管理器，某个动画或者交互开始了
  1. clearInteractionHandle(handler:Handle)  静态方法，进行清除句柄，通知管理器，某个动画或者交互结束了。
  1. setDeadline(deadline:number) 静态方法, 设置延迟时间，该会调用setTimeout方法挂起并且阻塞所有没有完成的任务，然后在eventLoopRunningTime到设定的延迟时间后，然后执行setImmediate方法进行批量执行任务
  2. Events:CallExpression
  3. addListener:CallExpression
(四)具体使用

其实该模块主要用于提升用户交互体验效果的，基本使用起来非常简单，大家可以看一下大大开发的reading项目(github.com/attentivene…),里边有部分使用该模块的方法，我这边截图一下即可：

查看图片

(五)最后总结

今天我们主要讲解了一下提升用户体验和交互效果的模块InteractionMnager(交互管理器)基本介绍和使用方法。

刚创建的React Native交流七群:131537844,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

查看图片

关注我的微博，可以获得更多精彩内容

avatar
文章
阅读
粉丝