时间戳

首页 > 解决方案 > 将 React Native FlatList 滚动到负偏移

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

问题描述

我有一个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到负偏移量？

标签： javascriptreact-nativescrollreact-native-flatlist

解决方案

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

ScrollView (Flatlist 继承 ScrollView Props )

PS：这是一个不同的想法。如果你想去-100，也许你可以添加一个固定高度的视图。（看起来一样）并且在时间之后关闭视图。（回到原点？）（如果它不起作用......）

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

<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 
    />

推荐阅读