在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();
InteractionManager Api介绍
贴出代码:
import { InteractionManager } from 'react-native';
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
console.log('动画执行完了')
// ...耗时较长的同步执行的任务...
});
}