[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