[react native] navigator过渡卡顿问题

navigator过渡卡顿问题

• ReactNative导航设计与实现

http://www.javashuo.com/article/p-zkphcfpb-gs.html

前面提到，Navigator组件彻底使用js实现，因为js的单线程特色，若是在页面转场动画过程当中，js干其余事情【好比渲染个某个jsx】超过了16ms，那么转场动画将不足60帧，给用户的感受就是动画有卡顿。

为了不这种状况，一种简单粗暴的办法就是在转场动画中不要让js来干别的事情。

那么咱们如何知道转场动画何时结束呢，官方提供了动画交互管理器InteractionManager，示例伪代码以下

• 场景过渡动画

http://www.jianshu.com/p/ce0a43cd672f

在React Native 团队的reddit thread里，我问过这个团队为何Navigator组件在切换场景的时候会很很是卡顿。在你简单地使用Navigator组件的时候，你会发现场景之间过渡的时候动画会波动。这样的波动在Android中更为糟糕，尽管我到如今尚未测试最新版本的。React Native 团队回复说这些动画是从Js层动画来调用Native层响应，这是由于Js逻辑的咽喉堆积而形成的掉帧。这里给出了InteractionManager模块，这里是文档。咱们发现Navigator和InteractionManager搭配用起来效果很是好。然而，到如今咱们主要仍是严重的依赖了 NavigatorIOS，一个更快且可以更好的处理过渡动画的组件，由于它是基于Native组件的呀。不过NavigatorIOS不足的地方就是在复杂的应用中很难去管理它的状态。幸运的是，咱们的应用是一个没有大量路由的简单应用。在不久的未来，咱们将使用Navigator来取而代之。

• 缓慢的导航器(Navigator)切换

http://reactnative.cn/docs/0.22/performance.html#content

如以前说，Navigator的动画是由JavaScript线程所控制的。想象一下“从右边推入”这个场景的切换：每一帧中，新的场景从右向左移动，从屏幕右边缘开始（不妨认为是320单位宽的的x轴偏移），最终移动到x轴偏移为0的屏幕位置。切换过程当中的每一帧，JavaScript线程都须要发送一个新的x轴偏移量给主线程。若是JavaScript线程卡住了，它就没法处理这项事情，于是这一帧就没法更新，动画就被卡住了。

长远的解决方法，其中一部分是要容许基于JavaScript的动画从主线程分离。一样是上面的例子，咱们能够在切换动画开始的时候计算出一个列表，其中包含全部的新的场景须要的x轴偏移量，而后一次发送到主线程以某种优化的方式执行。因为JavaScript线程已经从更新x轴偏移量给主线程这个职责中解脱了出来，所以JavaScript线程中的掉帧就不是什么大问题了 —— 用户将基本上不会意识到这个问题，由于用户的注意力会被流畅的切换动做所吸引。

不幸的是，这个方案尚未被实现。因此当前的解决方案是，在动画的进行过程当中，利用InteractionManager来选择性的渲染新场景所需的最小限度的内容。

InteractionManager.runAfterInteractions的参数中包含一个回调，这个回调会在navigator切换动画结束的时候被触发（每一个来自于Animated接口的动画都会通知InteractionManager，不过这个就超出了本文的讨论）。

• What are the best practices around using InteractionManager?

https://github.com/facebook/react-native/issues/2248

Posting usage example repo link here so it's easy to reference: 

https://github.com/brentvatne/run-after-interactions-exp

rn文章

ReactNative的Navigator组件使用方式

http://www.jianshu.com/p/91fa0f34895e

rn深刻

https://github.com/changfuguo/react-native/blob/master/listview-pulldown.md

https://github.com/cnsnake11/blog

https://github.com/ele828/react-native-guide

https://segmentfault.com/t/react-native/blogs

rn动画

ReactNative Animated动画详解

http://www.alloyteam.com/2016/01/reactnative-animated/

http://www.alloyteam.com/2016/01/react-animation-practice/

es6 ECMAScript 6 入门

http://es6.ruanyifeng.com/#docs/promise

React/React Native 的ES5 ES6写法对照表

http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8

React.createClass vs extends React.Component

http://imweb.io/topic/56da7609ca5e865230c1d50e

React Native 的 ES6 类写法与未定义错误

http://www.wangchenlong.org/2016/04/26/1604/261-rn-es6-class/

JavaScript 函数式编程手册 (ES6)

https://zhuanlan.zhihu.com/p/20726280