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

转载于:https://www.cnblogs.com/jkr666666/p/9970713.html

React-Native Navigator 过渡动画卡顿的解决方案相关推荐

lottie android 卡顿,说说动画卡顿的解决方案
CSS3 动画卡顿解决方案前端时间用animation实现H5页面中首页动画过渡,很简单的一个效果,首页加载一个客服头像,先放大,停留700ms后再缩小至顶部.代码如下首页加载动画 .welcom ...
[react native] navigator过渡卡顿问题
为什么80%的码农都做不了架构师?>>> navigator过渡卡顿问题 ReactNative导航设计与实现 https://segmentfault.com/a/11900 ...
CSS3 动画卡顿性能优化解决方案--摘抄
最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示到底是什么意思? 所以这又触碰到了我的知识盲区, ...
使用React Native进行气泡动画
by Narendra N Shetty 由纳伦德拉·N·谢蒂(Narendra N Shetty) 使用React Native进行气泡动画 (Bubble animation with React ...
css鼠标拖拉卡顿_浅谈CSS3 动画卡顿解决方案
为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的.但是我们要明确以下几个概念:单线程,主线程和合成线程. 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有 ...
CSS transition动画卡顿的探究
一.问题今天在使用css3的transition做动画过渡时,发现动画会卡顿,特此记录我发现卡顿的一些原因和笔记. 先给出结论: 在使用css3 transtion做动画效果时,transform实 ...
android 动画卡顿分析工具
android 动画卡顿分析工具 Android应用性能优化之分析工具上一次记录了解决过度绘制的过程,这一次,想先弄清个概念性的东西,就是如何判断顺不顺畅? 这东西其实最初我自己也觉得有点废话,用起 ...
Android 解决帧动画卡顿问题
Android帧动画一次性加载会造成ui卡顿,所以就有了这份代码.通过handle队列和Bitmap复用,每次加载一张并显示,可以解决帧动画卡顿问题. 使用方法: int[] right_res_id ...
Windows10文件重命名/复制/移动时，导致文件资源管理器卡顿，解决方案
Windows10文件重命名/复制/移动时,导致文件资源管理器卡顿的解决方案有时,重命名文件要卡顿好久,拖拽一个文件也要卡顿好久.解决方式很简单: (1)随便打开一个文件夹,点击左上角文件-> ...

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

React-Native Navigator 过渡动画卡顿的解决方案相关推荐

最新文章

热门文章