到达顶部时加载更多答案

【问题标题】：Load more when the top is reached到达顶部时加载更多
【发布时间】：2019-02-28 14:33:23
【问题描述】：

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

谢谢。

【问题讨论】：

您是否尝试过使用Flatlist 组件的onRefresh 属性？查看此视频：youtube.com/watch?v=pHLFJs7jlI4

标签： react-native react-native-flatlist

【解决方案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) 或者您可以使用“倒置”属性，onEndReached 将在屏幕顶部调用

倒置的反转滚动方向。使用 -1 的比例变换。

【讨论】：

感谢您的回复，但我遇到了与上述相同实现的问题，一旦我加载更多数据并渲染被称为平面列表，请移回最新的顶部元素，不如自然滚动流畅（在底部添加数据）。就像我们在底部加载更多，焦点停留在当前项目上，但在顶部的情况下，它会在最顶部闪烁。
如何将新项目添加到列表中？你只是将它们添加到最后吗？因为您只需在列表末尾添加新项目
由于我需要在现有数据之上加载新数据，我只是将旧数据附加到新获取的数据中，因此在数组中它成为我的顶级数据，例如我有 [1,3,4,5,6] 在状态列表中，我从服务器收到 [a,b,c,d]，我只是将旧数据附加到其中因此列表变为 [a,b,c,d,1,3,4,5,6] 一旦我添加了这个，我的平面列表滚动到顶部并专注于 a ，这种行为是主要问题。
你可以尝试使用 invert 属性并在末尾添加新数据吗？

【解决方案2】：

是的，我们可以在 React native 0.60 及更高版本中实现这一点，因为在 Virtual 列表中进行了重大更改。它仍然不包含适用于 Android 的解决方案。

【讨论】：

【解决方案3】：

你可以通过inverted prop来实现。当你的FlatList 被反转时，你的onEndReached 会在你到达顶部时被调用。

【讨论】：

是的，这是可行的，但我需要的是在两端加载更多，使用 react native 60.1 我们可以做到这一点，但仍然不是很稳定。