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('动画执行完了')
// ...耗时较长的同步执行的任务...
});
}
React-Native Navigator 过渡动画卡顿的解决方案的更多相关文章
- react native tap切换页面卡顿
问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...
- CSS3 动画卡顿性能优化解决方案--摘抄
最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...
- performance面板使用,以及解决动画卡顿
https://googlechrome.github.io/devtools-samples/jank// 官方案例 https://juejin.im/post/5b65105f518825 ...
- React-Native 之 GD (十九)TabBarItem 逻辑完善 / 关闭筛选菜单滑动手势 / Navigator 掉帧卡顿问题处理
1.TabBarItem 逻辑完善 那么为了更好的用户体验,我们这边还需要来处理一下点击 TabBarItem 的一下细节,那就是当用户点击 Item 时,可能只是单纯的想进行页面的 切换或者置顶操作 ...
- [转] 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 ...
- Chrome 下动画卡顿问题的另一种可能
[现象] 动画出现了明显的卡顿,且仅仅出现在 chrome 中. [原因排查] 一开始使用了css动画的时候已经出现了卡顿.找到如下的文章:CSS3 动画卡顿解决方案.深入浏览器理解CSS anima ...
- javascript 手势(swipeLeft,swipeRight)滑动中使用css3动画卡顿,开启硬件加速
今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...
- 移动端web页面滚动不流畅,卡顿闪烁解决方案
移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overf ...
- ionic1页面切换动画卡顿优化
https://github.com/shprink/ionic-native-transitions https://www.npmjs.com/package/ionic-native-trans ...
随机推荐
- 896. Monotonic Array
An array is monotonic if it is either monotone increasing or monotone decreasing. An array A is mono ...
- python入门:最基本的用户登录
#! usr/bin/env python # -*- coding: utf-8 -*- #最基本的用户登录 import getpass usre = input("username:& ...
- MYSQL安装与库的基本操作
mysql数据库 什么是数据库 # 用来存储数据的仓库 # 数据库可以在硬盘及内存中存储数据 数据库与文件存储数据区别 数据库本质也是通过文件来存储数据, 数据库的概念就是系统的管理存储数据的文件 数 ...
- Spring MVC+Mybatis 多数据源配置及发现的几个问题
1.CustomerContextHolder 数据源管理类,负责管理当前的多个数据源,基于ThreadLocal实现,对每个线程设置不同的目标数据源 public class CustomerCon ...
- Linux学习-什么是例行性工作排程
那么 Linux 的例行性工作是如何进行排程的呢?所谓的排程就是将这些工作安排执行的流程之意! 咱们的 Linux 排程就是透过 crontab 与 at 这两个东西! Linux 工作排程的种类: ...
- oracle 控制文件的重建
目录 oracle 控制文件的重建 NORESETLOGS RESETLOGS oracle 控制文件的重建 不到最后时刻,如三个控制文件都已损坏,又没有控制文件的备份.还是不要重建控制文件,处理不好 ...
- Cookie和Session的作用和工作原理
一.Cookie详解 (1)简介 因为HTTP协议是无状态的,即服务器不知道用户上一次做了什么,这严重阻碍了交互式Web应用程序的实现.在典型的网上购物场景中,用户浏览了几个页面,买了一盒饼干和两饮料 ...
- 我的PC必装软件
我的PC必装软件 TeXLive LaTeX套装 WinEdt LaTeX编辑器 PyCharm Python IDE Inkscape 矢量图制作,我根本不会用,但是常用来把SVG转成*.tex文件 ...
- Leetcode 423.从英文中重建数字
从英文中重建数字 给定一个非空字符串,其中包含字母顺序打乱的英文单词表示的数字0-9.按升序输出原始的数字. 注意: 输入只包含小写英文字母. 输入保证合法并可以转换为原始的数字,这意味着像 &quo ...
- LibreOJ β Round #4
A游戏 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: qmqmqm 提交提交记录统计讨论测试数据 题目描述 qmqmqm和subline ...