将 React Native FlatList 滚动到负偏移答案

【问题标题】：Scrolling React Native FlatList to negative offset将 React Native FlatList 滚动到负偏移
【发布时间】：2020-07-07 22:03:25
【问题描述】：

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

【问题讨论】：

标签： javascript react-native scroll react-native-flatlist

【解决方案1】：

看来您需要将 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 
    />

【讨论】：

嗨，看起来你从这里复制了 StackOverflow 的答案stackoverflow.com/questions/58157436/… 我不太确定该解决方案将如何在 FlatList 上工作。如果你能进一步解释，那就太好了。谢谢！
scrollToOverflowEnabled={true} 将此行添加到FlatList 不起作用。
好像只有ios才有这个props，你是在Android上构建的吗？

【解决方案2】：

使用 offset 而不是 y 作为 scrollToOffset 的参数键，如 the docs 中所述：

flatlistRef.current.scrollToOffset({ offset: -100 });

【讨论】：