React-Native Navigator 過渡動畫卡頓的解決方案

在RN0.44版本之前，路由導航跳轉幾乎是使用的是Navigator組件，在0.44版本以后就不推薦使用了，官方推薦的是react-navigation，當然還是可以在廢棄的庫中找到：
import { Navigator } from 'react-native-deprecated-custom-components'

首先Navigator動畫是由Js線程(單線程特點)控制。我們來腦補一下“從右邊推入”這個場景的切換：每一幀中，新的場景從右向左移動，從屏幕右邊緣開始，最終移動到x軸偏移為0的屏幕位置。切換過程中的每一幀，Js線程都需要發送一個新的x軸偏移量給主線程。如果這時候安排Js線程去干其他的事情(比如渲染某個jsx 耗時了)，那么它就無法處理這項事情，所以這一幀就無法更新，導致轉場動畫就不足60幀了，最后給用戶的感覺就是動畫有卡頓。

解決方案：
在轉場動畫的這段期間，我們應該使用InteractionManager，為新的scene選擇最少的內容數量以及動畫過程。InteractionManager.runAfterInteractions的參數中包含一個回調Func，這個回調Func會在navigator切換動畫結束的時候被觸發（注：每個來自於Animated接口的動畫都會通知InteractionManager，若存在多個交互或動畫，InteractionManager是會待全部完成之后才會觸發回調。該怎么破呢？我們可以通過給Animated動畫添加 isInteraction: false 屬性，讓其忽略此動畫
例：

Animated.timing(this.state.animatedValue, { 
toValue: 1, 
duration: 500, 
isInteraction: false // <-- 加上這一行 
}).start()

　　

import { InteractionManager } from 'react-native';

componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
          console.log('動畫執行完了')
          // ...耗時較長的同步執行的任務...
      });
}