RN - iOS - ScrollView联动滚动卡顿问题处理记录

Posted 2022-12-02 iOSTianNan

RN 实现首行/首列数据冻结, 且首行数据可以吸顶,该效果实现后, android端显示效果几乎完美.
ios端效果 在联动滚动的时候, 存在卡顿问题
记录一下优化过程…

iOS 卡顿解决后的效果

优化前的卡顿效果

会发现 联动卡顿非常严重,下面大列表滚动, 筛选项的跟随滚动刷新不及时

scrollEventThrottle

这个属性控制在滚动过程中，scroll 事件被调用的频率（单位是每秒事件数量）。更小的数值能够更及时的跟踪滚动位置，不过可能会带来性能问题，因为更多的信息会通过 bridge 传递。由于 JS 事件循环需要和屏幕刷新率同步，因此设置 1-16 之间的数值不会有实质区别。默认值为 0，意味着每次视图被滚动，scroll 事件只会被调用一次。

将这个属性设置到了120 ,效果会略好一点, 但是依然达不到完美的效果,

decelerationRate

一个浮点数，用于决定当用户抬起手指之后，滚动视图减速停下的速度。你也可以设置为"normal"或者"fast"，分别对应的是 iOS 上的UIScrollViewDecelerationRateNormal和 UIScrollViewDecelerationRateFast。

• ‘normal’: iOS 上是 0.998，Android 上是 0.985（默认值）
• ‘fast’: 0.99

针对大列表的Scrollview, 设置以上属性, 可以让大列表滚动结束的更加快速, 但是仍然不能达到完美效果

最终解决

      onScroll=(event: any) => 
        if (this.sectionHeaderScrollerDragBegin) return;
        let offsetX = event.nativeEvent.contentOffset.x;
        this.sectionHeaderRef.scrollTo(x: offsetX, y: 0, animated: false)
      

在大列表的滚动监听是, 关闭小筛选条的滚动动画效果, 并设置大列表的scrollEventThrottle=16即可

猜测: 关闭小筛选条的滚动动画, 同时大列表的刷新与js事件本身同步起来 ,这样就刚刚好做到同步无延迟卡顿