onEndReachedThreshold 在react-native 中的真正含义

Question

来自文档：

onEndReachedThreshold 数字

调用 onEndReached 的阈值（以像素为单位，虚拟的，非物理的）。 所以我只是想知道这意味着什么，是从顶部开始的阈值，还是从底部开始的阈值。

从顶部？ - 如果我设置 onEndReachedThreshold ={10} 的值，我的 onEndReached 是否会在滚动到 10 像素或其他像素时立即调用。

从底部？ - 如果我设置 onEndReachedThreshold ={listview height -10} 的值，我的 onEndReached 会在我滚动到 10 像素或其他位置时立即调用吗？

Answer 1

对于任何使用

FlatList

而不是

ListView

的人，请注意参数单位已更改。

对于

ListView

，它是以距底部的像素为单位的，但根据FlatList的文档，它是列表项中距底部的长度单位。

列表的下边缘距离内容的末尾距离末尾有多远（以列表可见长度为单位）才能触发 onEndReached 回调。因此，当内容末尾在列表可见长度的一半以内时，值 0.5 将触发 onEndReached。

因此，如果您希望当用户位于当前数据集的一半时更新列表，请将值设置为

0.5

Answer 2

在 2020 年，onEndReachedThreshold 表示在触发事件之前您应该从底部开始的屏幕长度数。

当距离两个全屏长度时，我使用 onEndReachedThreshold={2} 触发 onEndReached。

Answer 3

文档始终是最好的方法：

onEndReached 函数
当所有行都已渲染并且列表已滚动到底部的 onEndReachedThreshold 内时调用。提供原生滚动事件。

onEndReachedThreshold 数
调用 onEndReached 的阈值（以像素为单位）（虚拟，非物理）。

据我所知： 如果你这样做

 onEndReachedThreshold ={10}

如果你从底部滚动到 10 个像素，它会调用

onEndReached

Answer 4

这就是它的工作原理，具体取决于源代码：

const {contentLength, visibleLength, offset} = this._scrollMetrics;
const distanceFromEnd = contentLength - visibleLength - offset;
if (
  onEndReached &&
  this.state.last === getItemCount(data) - 1 &&
  distanceFromEnd < onEndReachedThreshold * visibleLength &&
  (this._hasDataChangedSinceEndReached ||
    this._scrollMetrics.contentLength !== this._sentEndForContentLength)
) {
  // Only call onEndReached once for a given dataset + content length.
  this._hasDataChangedSinceEndReached = false;
  this._sentEndForContentLength = this._scrollMetrics.contentLength;
  onEndReached({distanceFromEnd});
}

因此，首先它检查 onEndReached 回调是否存在，然后检查数据的最后一个元素是否已呈现（不一定可见），然后才检查是否滚动到列表底部。

这里的

visibleLength 是列表元素的高度（如果未设置水平），而 contentLength 是列表元素容器的高度乘以数据中元素的数量。 正如您所看到的，onEndReachedThreshold是“可见屏幕”的反向数量（即列表元素的高度），您应该滚动直到您的onEndReached回调将触发 - 更大的onEndReachedThreshold，更少您应该滚动。当值 onEndReachedThreshold = 0.5 时，您的回调将几乎在列表的“末尾”触发。但请记住，无论您设置什么值，它都不会触发，直到渲染最后一个元素。

Answer 5

答案基于@joshua-pinter的评论

要理解React Native的

onEndReachedThreshold

中的

FlatList

，没有什么比从一个真实的例子中学习更好的了：

• 页面大小：20 条
• 屏幕上可见的项目：10 个项目
• 要在项目

  onReachEnd

  处触发

  19th

  回调，请计算：

• (Page_Size - Expect_Trigger_Position) / On_Screen_Visible_Items

• (20 - 19) / 10 = 0.1

• 因此，阈值应设置为0.1
• 当滚动到第 19 项时，将触发

  onReachEnd

  事件。

查看GIF：

Answer 6

onEndReached：当滚动位置到达渲染内容的 onEndReachedThreshold 范围内时调用一次。

onEndReachedThreshold：距离底部边缘有多远（以列表可见长度为单位） list 必须从内容末尾开始才能触发

onEndReached

回调。 因此，当内容结束时，值 0.5 将触发

onEndReached

在列表可见长度的一半以内。