到达顶部时加载更多

Question

正如我们可以在 onEndReached 时使用加载更多功能一样，当我们到达列表顶部时我们如何使用加载更多功能？此外，当我在顶部加载更多数据时执行此操作时，平面列表会移动到最顶部的元素，因此滚动变得无限。

谢谢。

Answer 1

1) 您可以使用 onScroll 回调并从 event.nativeEvent.contentOffset.y

获取距顶部的偏移量

0表示顶点

例如：

<FlatList
    data={messages}
    onScroll={
        (event: NativeSyntheticEvent<NativeScrollEvent>) => 
            onContentOffsetChanged(event.nativeEvent.contentOffset.y)
    }
/>

onContentOffsetChanged = (distanceFromTop: number) => {
    distanceFromTop === 0 && makeSomething();
}

2) 或者您可以使用 "inverted" 属性并且 onEndReached 将在屏幕顶部调用

inverted Reverses the direction of scroll. Uses scale transforms of -1.

Answer 2

你可以通过inverted道具来实现。当你 FlatList 倒置时，你的 onEndReached 会在你到达顶部时被调用。

Answer 3

是的，我们可以在 React native 0.60 及更高版本中实现这一点，因为在虚拟列表中进行了重大更改。它仍然不包含 Android.

的解决方案

到达顶部时加载更多

Load more when the top is reached

react-native

react-native-flatlist