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, 0, 316, 316.05],
              outputRange: [152, 152, 0, 0]
            }),
          }}>


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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值