React-Native Navigator 过渡动画卡顿的解决方案

  • Z时代
  • 2024-01-10
  • 分类：综合

react

在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('动画执行完了')
          // ...耗时较长的同步执行的任务...
      });
}

　　

以上是 React-Native Navigator 过渡动画卡顿的解决方案 的全部内容， 来源链接： utcz.com/z/382257.html

回到顶部