React Native ScrollView实现上下滚动自动吸附对应粘性头部

我在React Native的ScrollView中设置了多个stickyHeaderIndices，希望向上滚动时自动吸附到下一个粘性头部，向下滚动时自动吸附到上一个粘性头部。偏移量需要支持动态变化，因为<Text>组件的高度可能不同（文本内容可长可短）。现有代码示例如下：

<ScrollView
  onScroll={(event) => {
    // 这里需要实现逻辑
  }}
  decelerationRate="fast"
  snapToStart={false}
  disableIntervalMomentum={true}
  stickyHeaderIndices={[0, 2, 4, 6, 8, 10]}
  snapToEnd={false}>
    <Text>Header</Text> {/* 初始加载位置 */}
    <Text>lorem ipsum</Text>
    <Text>Header</Text> {/* 滚动到这里 */}
    <Text>lorem ipsum</Text>
    <Text>Header</Text> {/* 滚动到这里 */}
    <Text>lorem ipsum</Text>
    <Text>Header</Text> {/* 滚动到这里 */}
    <Text>lorem ipsum</Text>
    <Text>Header</Text> {/* 滚动到这里 */}
    <Text>lorem ipsum</Text>
    <Text>Header</Text> {/* 滚动到这里 */}
    <Text>lorem ipsum</Text>
</ScrollView>

实现方案 #

核心思路 #

通过监听滚动位置，结合动态获取的头部及内容高度计算目标吸附偏移量，在滚动停止后自动滚动到对应粘性头部位置，同时兼容文本高度变化的场景。

完整代码实现 #

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { ScrollView, Text, View } from 'react-native';

const StickySnapScrollView = () => {
  // 存储所有元素的引用（头部+内容）
  const elementRefs = useRef([]);
  // 存储每个头部对应的滚动偏移量
  const headerOffsets = useRef([]);
  // 记录上一次滚动位置，判断滚动方向
  const lastScrollY = useRef(0);
  // 防抖计时器
  const debounceTimer = useRef(null);
  const scrollViewRef = useRef(null);

  // 动态测量所有元素的高度，计算头部偏移量
  const measureElements = useCallback(async () => {
    const offsets = [];
    let currentOffset = 0;

    for (let i = 0; i < elementRefs.current.length; i++) {
      const ref = elementRefs.current[i];
      if (ref) {
        await new Promise((resolve) => {
          ref.measure((x, y, width, height, pageX, pageY) => {
            // 偶数索引是头部元素，记录当前偏移量
            if (i % 2 === 0) {
              offsets.push(currentOffset);
            }
            currentOffset += height;
            resolve();
          });
        });
      }
    }

    headerOffsets.current = offsets;
  }, []);

  // 防抖处理的吸附逻辑
  const snapToHeader = useCallback((scrollY) => {
    const offsets = headerOffsets.current;
    if (offsets.length === 0) return;

    // 判断滚动方向
    const isScrollingUp = scrollY < lastScrollY.current;
    lastScrollY.current = scrollY;

    // 找到当前所处的头部区间
    let targetIndex = 0;
    for (let i = 0; i < offsets.length; i++) {
      if (scrollY >= offsets[i]) {
        targetIndex = i;
      } else {
        break;
      }
    }

    // 根据滚动方向和位置比例调整目标头部
    if (isScrollingUp) {
      // 向上滚动时，若超过上一个头部的中间位置，吸附到上一个
      if (targetIndex > 0 && scrollY < offsets[targetIndex] - (offsets[targetIndex] - offsets[targetIndex - 1]) / 2) {
        targetIndex -= 1;
      }
    } else {
      // 向下滚动时，若超过当前头部的中间位置，吸附到下一个
      if (targetIndex < offsets.length - 1 && scrollY > offsets[targetIndex] + (offsets[targetIndex + 1] - offsets[targetIndex]) / 2) {
        targetIndex += 1;
      }
    }

    // 执行滚动吸附
    scrollViewRef.current?.scrollTo({
      y: offsets[targetIndex],
      animated: true,
    });
  }, []);

  // 监听滚动事件
  const handleScroll = useCallback((event) => {
    const scrollY = event.nativeEvent.contentOffset.y;

    // 清除之前的防抖计时器
    if (debounceTimer.current) {
      clearTimeout(debounceTimer.current);
    }

    // 滚动停止300ms后执行吸附逻辑
    debounceTimer.current = setTimeout(() => {
      snapToHeader(scrollY);
    }, 300);
  }, [snapToHeader]);

  // 组件挂载或内容变化时重新测量高度
  useEffect(() => {
    measureElements();
    // 若文本内容动态变化，可在此处添加监听，重新调用measureElements
  }, [measureElements]);

  return (
    <ScrollView
      ref={scrollViewRef}
      onScroll={handleScroll}
      decelerationRate="fast"
      disableIntervalMomentum={true}
      stickyHeaderIndices={[0, 2, 4, 6, 8, 10]}
      scrollEventThrottle={16} // 保证滚动事件触发频率
    >
      <Text ref={(el) => (elementRefs.current[0] = el)}>Header 1</Text>
      <Text ref={(el) => (elementRefs.current[1] = el)}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </Text>
      <Text ref={(el) => (elementRefs.current[2] = el)}>Header 2</Text>
      <Text ref={(el) => (elementRefs.current[3] = el)}>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </Text>
      <Text ref={(el) => (elementRefs.current[4] = el)}>Header 3</Text>
      <Text ref={(el) => (elementRefs.current[5] = el)}>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
      <Text ref={(el) => (elementRefs.current[6] = el)}>Header 4</Text>
      <Text ref={(el) => (elementRefs.current[7] = el)}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
      <Text ref={(el) => (elementRefs.current[8] = el)}>Header 5</Text>
      <Text ref={(el) => (elementRefs.current[9] = el)}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</Text>
      <Text ref={(el) => (elementRefs.current[10] = el)}>Header 6</Text>
      <Text ref={(el) => (elementRefs.current[11] = el)}>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
    </ScrollView>
  );
};

export default StickySnapScrollView;

关键逻辑说明 #

1. 动态测量高度：measureElements函数遍历所有元素，通过measure方法获取每个元素的实际高度，累加计算出每个粘性头部对应的滚动偏移量，解决文本高度动态变化的问题。
2. 滚动方向判断：通过对比当前滚动位置和上一次滚动位置，判断用户是向上还是向下滚动。
3. 防抖吸附：使用防抖函数，确保滚动停止后再执行吸附操作，避免滚动过程中频繁触发滚动动画，提升用户体验。
4. 吸附阈值判断：根据滚动方向和当前位置与头部偏移量的比例，决定吸附到当前头部还是相邻头部，让吸附逻辑更符合用户操作预期。

内容的提问来源于stack exchange，提问作者paperskyline