Load more when the top is reached

问题

As we can use load more functionality when onEndReached, the same way how can we use load more when we reach to the top of the list ? Also while doing this when I load more data at the top, Flat list moves to the very top element and hence scroll becomes infinite.

thanks.

回答1:

Yes, we can achieve this in React native 0.60 and above, since the significant changes been made in the Virtual list. Still its doesn't contain the solution for Android.

回答2:

1) You can use onScroll callback and get offset from top from event.nativeEvent.contentOffset.y

0 means the top point

For example:

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

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

2) Or you can use "inverted" property and onEndReached will call at top of the screen

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

回答3:

You can achieve it by inverted prop. When you FlatList is inverted your onEndReached would be called when you reach the top.

来源：https://stackoverflow.com/questions/54928023/load-more-when-the-top-is-reached