javascript - 将 React Native FlatList 滚动到负偏移

Question

我有一个 FlatList 并且我正在实现自定义拉动刷新，我的想法是将其滚动到负偏移以在释放时显示其下方的动画。这是我的 FlatList 的代码。

const flatListRef = useRef(null);

const handleRelease = () => {
    flatlistRef.current.scrollToOffset({ y: -100 });
    setTimeout(() => {
        flatlistRef.current.scrollToOffset({ y: 0 });
    }, 1000)
}

return (
    <FlatList
        data={data}
        renderItem={({ item }) => {
            return (
                <View style={styles.row}>
                    <Text style={styles.text}>{item}</Text>
                </View>
            )
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        onResponderRelease={handleRelease}
        ref={flatListRef}
    />  
)

释放后，FlatList 应滚动到偏移量 -100 以显示下面的动画，然后在 1 秒后向上滚动。但是发生的事情是它正在滚动到偏移量 0(我可以说是因为我尝试在释放后立即向下滚动，它会立即尝试向上滚动)。

是否可以通过编程方式将 FlatList 滚动到负偏移量？

Answer 1

看来您需要将 scrollToOverflowEnabled 设置为 true 才能应用此行为。

ScrollView (Flatlist 继承了 ScrollView 的 Props )

附言: 这是一个不同的想法。 如果你想去-100，也许你可以添加一个固定高度的 View 。 (看起来一样) 时间过后关闭 View 。 (回到原位？) (如果不行....)

----------------编辑-----

<FlatList
        data={data}
        renderItem={({ item }) => {
            return (
                <View style={styles.row}>
                    <Text style={styles.text}>{item}</Text>
                </View>
            )
        }}
        onScroll={onScroll}
        scrollEventThrottle={16}
        onResponderRelease={handleRelease}
        ref={flatListRef}
        scrollToOverflowEnabled={true}  // Just put in here 
    />