在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('動畫執行完了')// ...耗時較長的同步執行的任務...}); }

　　

轉載于:https://www.cnblogs.com/jkr666666/p/9970713.html

總結

以上是生活随笔為你收集整理的React-Native Navigator 过渡动画卡顿的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。