web-dev-qa-db-fra.com

Détecter la fin du défilement dans React Native ScrollView, snap to page

React Native ScrollView a un accessoire pagingEnabled . Cependant, il suppose que la largeur de chaque page (ou composant enfant) dans ScrollView est égale à la largeur de ScrollView.

Comment pouvons-nous réparer cela pour le faire fonctionner correctement pour les pages plus petites que ScrollView?

Est-il possible de détecter quand l'utilisateur arrête de faire défiler? Ensuite, nous pouvons facilement écrire notre propre code pour accrocher à la bonne page.

Edit: Il existe plusieurs autres façons de réparer cela en utilisant des accessoires qui ne sont disponibles que sur iOS, c'est donc particulièrement un problème sur Android.

14
ArneHugo

Il existe deux accessoires différents que vous pouvez définir sur React Native ScrollView qui prend un rappel pour notifier la fin du défilement (ils sont désormais tous les deux documentés)).


onScrollEndDrag fonction

Appelé dès que l'utilisateur lâche le ScrollView (soulève le doigt de l'écran).

Exemple de travail: https://rnplay.org/apps/Ufv6Cg (Plus disponible)


onMomentumScrollEnd fonction

Appelé lorsque le ScrollView cesse de glisser (il continuera normalement à glisser un peu après que l'utilisateur a levé le doigt de l'écran).

Exemple de travail: https://rnplay.org/apps/BPgG_g (Plus disponible)


Remarque: Je n'ai pas pu trouver les méthodes dans la documentation de l'API pour aucun composant React Native, mais elles fonctionnent comme indiqué dans les exemples. Je les ai vues utilisées - ici dans carrousel réactif-natif .

30
ArneHugo