onEndReachedThreshold 在 react-native 中的真正含义

Question

from documentation:

onEndReachedThreshold 数量

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

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

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

Answer 1

对于使用FlatList INSTEAD of ListView的任何人，请注意参数单位已更改。

对于ListView，它是从底部算起的像素，但根据docs for FlatList，它是列表项中从底部算起的长度单位。

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

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

Answer 2

documentation 永远是最好的选择：

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

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

所以在我看来： 如果你这样做 onEndReachedThreshold ={10} 它会调用 onEndReached 如果你从底部滚动到 10 个像素

Answer 3

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

我使用 onEndReachedThreshold={2} 在两个全屏长度之外触发 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 的值，您的回调将几乎在列表的“末尾”处触发。但请记住，无论您设置什么值，它不会触发直到最后一个元素被渲染。