如何使 ListHeaderComponent 的一部分粘在 React Native FlatList 上

Question

我有一个带有 ListHeaderComponent 的 React Native FlatList 和 2 个内部文本。结构是：

• 标题
  • 第 1 部分 - 非粘性
  • 第 2 部分 - 粘性
• 列出项目

这意味着随着列表向上滚动，第 1 部分应该消失（非粘性），而第 2 部分应该保持在列表顶部（粘性）。

这是代码：

<FlatList
  data={ items }
  renderItem={ renderItem }
  ListHeaderComponent={
     <View>
         <Text>Section 1</Text>
         <Text>Section 2</Text>
     </View>
  }
  stickyHeaderIndices={[0]}
/>

我必须将索引设置为 [0]，以便它选择标题，但无法选择标题中的第二个。有什么想法吗？

顺便说一句-我想在列表滚动时捕获垂直偏移，然后放在 HeaderComponent main 上，以便模拟滚动。但我的理解是Android不支持负边距。

BTW-2 - 我正在使用 react-native-draggable-flatlist，所以我不想将 Text 放入列表本身，因为它会使列表项的逻辑复杂化。 谢谢！

Answer 1

使用动画 API 怎么样？

1. 您基本上为每个项目设置了固定高度。
2. 只有第二项（粘性项）在 FlatList 之外并且绝对定位。
3. 粘性项目的偏移量作为项目高度。
4. 当您向上滚动时，偏移值将被内插为零，这意味着粘在顶部。

---

下面的工作示例。

import { View, Animated, FlatList, Text } from 'react-native';

const ITEM_H = 30;
const items = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
const renderItem = ({ item }) => <Text style={{ height: ITEM_H }}>{item}</Text>;

export default () => {
  // animated value and interpolate setting
  const offset = React.useRef(new Animated.Value(0)).current;
  const animValue = offset.interpolate({
    inputRange: [0, ITEM_H],
    outputRange: [ITEM_H, 0],
    extrapolate: 'clamp',
  });

  // sticky second item and FlatList
  return (
    <SafeAreaView>
      <View style={{ position: 'relative' }}>
        <Animated.Text
          style={{
            backgroundColor: 'red',
            position: 'absolute',
            top: animValue,
            height: ITEM_H,
            zIndex: 10,
          }}>
          {items[1]}
        </Animated.Text>

        <FlatList
          data={items}
          renderItem={renderItem}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: offset } } }], {
            useNativeDriver: false,
          })}
        />
      </View>
    </SafeAreaView>
  );
};