react native 实现列表滑动 菜单栏悬停 过程优化,体验更平滑

菜单栏是个Animated.View,他的高度会随着列表的onScroll时间滑动重置 (这个很共识)

但是 你要把 view 的高度 放到state中,跟着onScroll 改变,这样的滑动效果会有卡顿感。

这里onScroll里的方法要这样写:

Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
{
listener: () => {

}
}
)(e);


对就是这个 不是直接在onScroll 里 setState



animated.view 写法 :

<Animated.View
style={{
height: this.state.scrollY.interpolate({
inputRange: [-0.05,316,316.05],
outputRange: [152,152,0]
}),
}}>


如果要求,菜单栏要与scrollview 同步滚动:

animated.view 里面包裹一个绝对布局的view 即可

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...