如何获取SectionList当前粘性头部以添加专属底部阴影？

我之前也碰到过这个棘手的问题——React Native原生的SectionList粘性头部是系统层面渲染的，确实没法直接拿到这个处于固定状态的头部组件来修改样式。不过有两个靠谱的方案能实现你要的效果，我给你详细拆解下：

方案一：监听可见项动态控制头部样式 #

这个方案改动小，利用SectionList自带的回调跟踪当前活跃的section，给对应的头部动态添加上阴影：

1. 先给每个section数据加上唯一标识（比如id），方便后续判断：

const sections = [
  { id: 'section1', title: 'Section 1', data: [...] },
  { id: 'section2', title: 'Section 2', data: [...] },
  // ...其他section数据
];

2. 用状态保存当前处于粘性状态的section ID：

const [stickySectionId, setStickySectionId] = useState(null);

3. 实现onViewableItemsChanged回调，跟踪当前最顶部的可见section：

const handleViewableItemsChanged = useCallback(({ viewableItems }) => {
  if (viewableItems.length > 0) {
    // 获取当前第一个可见item所属的section ID
    const currentSectionId = viewableItems[0].section.id;
    // 简单场景下直接设置即可，若要更精准可结合滚动偏移量进一步判断
    setStickySectionId(currentSectionId);
  }
}, []);

const viewabilityConfig = {
  itemVisiblePercentThreshold: 50, // 可根据你的布局调整阈值
};

4. 在renderSectionHeader里根据状态添加阴影样式：

const renderSectionHeader = ({ section }) => {
  const isSticky = section.id === stickySectionId;
  const headerStyle = {
    padding: 16,
    backgroundColor: '#fff',
    // 仅当头部处于粘性状态时添加阴影
    ...(isSticky && {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 4,
      elevation: 4, // Android端需要用elevation实现阴影
    }),
  };

  return (
    <View style={headerStyle}>
      <Text>{section.title}</Text>
    </View>
  );
};

5. 最后把这些属性传给SectionList：

<SectionList
  sections={sections}
  stickySectionHeadersEnabled={true}
  onViewableItemsChanged={handleViewableItemsChanged}
  viewabilityConfig={viewabilityConfig}
  renderSectionHeader={renderSectionHeader}
  renderItem={({ item }) => <Item item={item} />}
/>

这个方案的优势是改动成本低，缺点是判断粘性状态的准确性可能需要根据布局调整阈值，因为它是基于item可见性而非头部是否真正被固定。

方案二：自定义模拟粘性头部（精准可控） #

如果方案一的准确性达不到要求，你可以自己实现一个粘性头部，完全掌控它的样式逻辑：

1. 先隐藏SectionList原生的粘性头部（或设置透明，避免重复显示）：

const renderOriginalHeader = ({ section }) => {
  return (
    <View style={{ height: 48, opacity: 0 }}>
      <Text>{section.title}</Text>
    </View>
  );
};

2. 在SectionList上方添加一个绝对定位的自定义头部容器，同时监听滚动事件判断头部状态：

const [currentStickyHeader, setCurrentStickyHeader] = useState(sections[0]?.title || '');
const [showShadow, setShowShadow] = useState(false);

const handleScroll = useCallback((event) => {
  const scrollY = event.nativeEvent.contentOffset.y;
  // 这里可以根据实际布局计算每个section的顶部位置，下面是简化示例
  // 假设每个头部高度48，每个item高度60
  let currentSectionIndex = 0;
  let accumulatedHeight = 0;
  for (let i = 0; i < sections.length; i++) {
    accumulatedHeight += 48 + sections[i].data.length * 60;
    if (scrollY < accumulatedHeight - 48) {
      currentSectionIndex = i;
      break;
    }
  }
  setCurrentStickyHeader(sections[currentSectionIndex].title);
  
  // 当滚动超过第一个头部高度时显示阴影
  setShowShadow(scrollY > 48);
}, [sections]);

// 自定义粘性头部样式
const stickyHeaderStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  padding: 16,
  backgroundColor: '#fff',
  ...(showShadow && {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 4,
  }),
};

3. 最终布局结构：

<View style={{ flex: 1 }}>
  <View style={stickyHeaderStyle}>
    <Text>{currentStickyHeader}</Text>
  </View>
  <SectionList
    sections={sections}
    stickySectionHeadersEnabled={false} // 关闭原生粘性功能
    onScroll={handleScroll}
    scrollEventThrottle={16} // 确保滚动事件触发足够频繁
    renderSectionHeader={renderOriginalHeader}
    renderItem={({ item }) => <Item item={item} />}
    contentContainerStyle={{ paddingTop: 48 }} // 给自定义头部留出空间
  />
</View>

这个方案的优势是完全可控，阴影的显示时机可以精准调整，缺点是需要自己计算滚动位置，稍微复杂一点，但适配性更强。如果想要更精准的位置判断，可以给每个section头部添加ref，在组件挂载后用measure获取它们的实际y坐标。

内容的提问来源于stack exchange，提问作者Daniel Winkel-Pedersen