在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 过渡动画卡顿的解决方案的更多相关文章

  1. react native tap切换页面卡顿

    问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...

  2. CSS3 动画卡顿性能优化解决方案--摘抄

    最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...

  3. performance面板使用,以及解决动画卡顿

    https://googlechrome.github.io/devtools-samples/jank//    官方案例 https://juejin.im/post/5b65105f518825 ...

  4. React-Native 之 GD (十九)TabBarItem 逻辑完善 / 关闭筛选菜单滑动手势 / Navigator 掉帧卡顿问题处理

    1.TabBarItem 逻辑完善 那么为了更好的用户体验,我们这边还需要来处理一下点击 TabBarItem 的一下细节,那就是当用户点击 Item 时,可能只是单纯的想进行页面的 切换或者置顶操作 ...

  5. [转] React Native Navigator — Navigating Like A Pro in React Native

    There is a lot you can do with the React Native Navigator. Here, I will try to go over a few example ...

  6. Chrome 下动画卡顿问题的另一种可能

    [现象] 动画出现了明显的卡顿,且仅仅出现在 chrome 中. [原因排查] 一开始使用了css动画的时候已经出现了卡顿.找到如下的文章:CSS3 动画卡顿解决方案.深入浏览器理解CSS anima ...

  7. javascript 手势(swipeLeft,swipeRight)滑动中使用css3动画卡顿,开启硬件加速

    今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...

  8. 移动端web页面滚动不流畅,卡顿闪烁解决方案

    移动端web页面滚动不流畅,卡顿闪烁解决方案   1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...

  9. ionic1页面切换动画卡顿优化

    https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-trans ...

随机推荐

  1. Laravel常用命令

    php artisan make:controller BlogController php artisan make:model Blog

  2. python入门:if、elif、else 条件语句的基本用法

    #!/usr/bin/env python # -*- coding:utf-8 -*- #elif(否则如果,译音:埃尔夫)eise(否则,译音:埃尔斯) #if.elif.else 条件语句的基本 ...

  3. 点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

    给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...

  4. 【TCP/IP】【网络基础】网页访问流程

    引用自 <鸟哥的linux私房菜> http://cn.linux.vbird.org/linux_server/0110network_basic_1.php#ps7 那 TCP/IP ...

  5. 探讨2018年最受欢迎的15顶级Python库!

    近日,数据科学网站 KDnuggets 评选出了顶级 Python 库 Top15,领域横跨数据科学.数据可视化.深度学习和机器学习.如果本文有哪些遗漏,你可以在评论区补充. 图 1:根据 GitHu ...

  6. List删除元素

    在单线程环境下的解决办法 public void remove() { if (lastRet == -1) throw new IllegalStateException(); checkForCo ...

  7. Codeforces Round #505 D. Recovering BST(区间DP)

    首先膜一发网上的题解.大佬们tql. 给你n个单调递增的数字,问是否能够把这些数字重新构成一棵二叉搜索树(BST),且所有的父亲结点和叶子结点之间的gcd > 1? 这个题场上是想暴力试试的.结 ...

  8. Linux学习-透过 systemctl 管理服务

    透过 systemctl 管理单一服务 (service unit) 的启动/开机启动与观察状态 一般来说,服务的启动有两个阶段,一 个是『开机的时候设定要不要启动这个服务』, 以及『你现在要不要启动 ...

  9. angularjs报错问题记录

    1.[$injector:unpr]:没有找到注入的东西    2.$compile:multidir:多指令编译错误.    3.[ng:areq]:重复定义了ng-controller.    4 ...

  10. [python学习篇][廖雪峰][1]高级特性--创建生成器 方法1 a = (x for x in range(1,3))

    创建一个生成器的方法: for x in range(1,10000000) ,先生成一个列表[1........9999999] 如果我们只想要后面的几个元素,会发现浪费很多空间.所以,如果列表元素 ...