web-dev-qa-db-fra.com

ce que onEndReachedThreshold signifie vraiment dans réag-native

de la documentation :

nombre onEndReachedThreshold 

Seuil en pixels (virtuel et non physique) pour l'appel de onEndReached . donc je voulais juste savoir ce que cela signifie, est-ce le seuil du haut, ou est-ce le seuil du bas.

Du haut? - Si je définis onEndReachedThreshold = {10}, mon onEndReached est appelé dès que j'ai fait défiler jusqu'à 10 pixels, ou quelque chose d'autre.

Du fond? - Si je définis la valeur onEndReachedThreshold = {listview height -10}, mon onEndReached sera appelé dès que je ferai défiler jusqu'à 10 pixels, ou autre chose.

androidlistviewreact-native
12
Manjeet Singh

La documentation est toujours la meilleure voie à suivre:

onEndReached function
Appelé lorsque toutes les lignes ont été rendues et que la liste a été sélectionnée dans onEndReachedThreshold du bas. L'événement de défilement natif est fourni.

onEndReachedThreshold nombre
Seuil en pixels (virtuel, pas physique) pour appeler onEndReached.

Donc, comme je le vois: Si vous faites onEndReachedThreshold ={10}, il appelle onEndReached si vous avez fait défiler à 10 pixels du bas

7
dv3

Pour ceux qui utilisent FlatList INSTEAD of ListView, notez que les unités de paramètres ont changé. 

Pour ListView, il s’agissait de pixels à partir du bas, mais selon docs pour FlatList , il s’agit plutôt d’unités de longueur par rapport aux éléments de liste. 

À quelle distance de la fin (en unités de longueur visible de la liste) le bord inférieur de la liste doit être à partir de la fin du contenu pour déclencher le rappel onEndReached. Ainsi, une valeur de 0,5 déclenchera onEndReached lorsque la fin du contenu se situe dans la moitié de la longueur visible de la liste.

Ainsi, si vous souhaitez que la liste soit mise à jour lorsque l'utilisateur est à mi-chemin du jeu de données actuel, définissez la valeur sur 0.5.

15
jhm

Voici comment cela fonctionne en fonction du code source: 

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});
}

Donc, tout d’abord, il vérifie si un rappel onEndReached existe, puis vérifie si le dernier élément de données est restitué (pas nécessairement visible), et ensuite seulement si vous faites suffisamment défiler la liste vers le bas.

visibleLength ici est la hauteur de votre élément de liste (si horizontal n'est pas défini), et contentLength est la hauteur de votre conteneur d'élément de liste multiplier le nombre d'éléments dans les données . Comme vous pouvez le constater, onEndReachedThreshold est un nombre différent d’écrans visibles (c’est-à-dire la hauteur de votre élément de liste), vous devez faire défiler jusqu’à ce que votre rappel onEndReached se déclenche - plus grand onEndReachedThreshold, moins vous devez faire défiler. Avec la valeur onEndReachedThreshold = 0.5, votre rappel sera déclenché presque à la "fin" de la liste. Mais rappelez-vous que ne déclenchera pas tant que le dernier élément ne sera pas rendu, quelle que soit la valeur que vous définissez.

0
Artem Pelenev