web-dev-qa-db-ja.com

反応ネイティブでonEndReachedThresholdが本当に意味するもの

ドキュメントから

onEndReachedThreshold番号

OnEndReachedを呼び出すためのピクセル単位のしきい値(物理的ではなく仮想)。だから、それが何を意味するのか、それが上からのしきい値なのか、それとも下からのしきい値なのかを知りたかっただけです。

上から? -onEndReachedThreshold = {10}の値を設定した場合、10ピクセルまでスクロールするとすぐにonEndReachedが呼び出されますか、それとも何か他のものです。

下から? -onEndReachedThreshold = {listview height -10}の値を設定した場合、10ピクセルなどにスクロールするとすぐにonEndReachedが呼び出されます。

14
Manjeet Singh

documentation は常に最良の方法です。

onEndReached関数
すべての行がレンダリングされ、リストがボトムのonEndReachedThreshold内にスクロールされたときに呼び出されます。ネイティブスクロールイベントが提供されます。

onEndReachedThreshold番号
onEndReachedを呼び出すためのピクセル単位のしきい値(物理的ではなく仮想的)。

私が見るように:onEndReachedThreshold ={10}下から10ピクセルまでスクロールした場合、onEndReachedを呼び出します

9
dv3

FlatList INSTEAD of ListViewを使用している場合は、パラメーターの単位が変更されていることに注意してください。

ListViewの場合、それは下からのピクセル単位でしたが、 FlatListのドキュメント によると、リストアイテムの代わりに下からの長さの単位です。

OnEndReachedコールバックをトリガーするには、リストの下端からコンテンツの端までの距離(リストの表示可能な長さの単位)からの距離が必要です。したがって、0.5の値は、コンテンツの終わりがリストの表示可能な長さの半分以内にあるときにonEndReachedをトリガーします。

したがって、ユーザーが現在のデータセットの途中でリストを更新する場合は、値を0.5に設定します

21
jhm

これは、ソースコードに応じて動作する方法です。

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の場合、コールバックはリストのほぼ「終わり」で発生します。ただし、設定する値に関係なく、最後の要素がレンダリングされるまで起動しないであることを忘れないでください。

0
Artem Pelenev