2

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

  • 标题
    • 第 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 <View style={{marginTop: -offset }}> 上，这样它就可以模拟滚动。但我的理解是，Android 不支持负边距。

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

4

1 回答 1

0

使用动画 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>
  );
};

于 2021-06-15T15:13:31.630 回答