zoukankan      html  css  js  c++  java
  • 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('动画执行完了')
              // ...耗时较长的同步执行的任务...
          });
    }
    

      

  • 相关阅读:
    speeding up your web site 前端性能优化
    数据结构与算法学习链表
    SQL Server 无法生成 FRunCM 线程
    NoSql的优缺点
    Vs2012中开发Node.js应用
    利用GNUstep在windows下编写objectc
    Hadoop HDFS学习总结
    HBase Thrift 接口的一些使用问题及相关注意事项
    .NET深入解析LINQ框架
    【翻译】ASP.NET Web API是什么?
  • 原文地址:https://www.cnblogs.com/jkr666666/p/9970713.html
Copyright © 2011-2022 走看看