加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 08:17:11 所属栏目:百科 来源:网络整理
导读:菜单栏是个Animated.View,他的高度会随着列表的onScroll时间滑动重置 (这个很共识) 但是 你要把 view 的高度 放到state中,跟着onScroll 改变,这样的滑动效果会有卡顿感。 这里onScroll里的方法要这样写: Animated.event( [{ nativeEvent: { contentOffs

菜单栏是个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 即可

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读