[react native] navigator过渡卡顿问题

为什么80%的码农都做不了架构师？>>>   

navigator过渡卡顿问题

• ReactNative导航设计与实现

https://segmentfault.com/a/1190000004923877

前面提到，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

转载于:https://my.oschina.net/addcn/blog/667342