react-native - 到达顶部时加载更多

Question

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

谢谢。

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.