Voilà donc notre application ici.
Maintenant, dans cette application, nous avons ajouté beaucoup de fonctionnalités, mais il y a une chose que
je veux ajouter et c'est tirer pour rafraîchir.
Disons que je suis allé pouvoir récupérer tous les produits à l'intérieur de
cette page, donc sans la quitter et revenir qui récupérera les derniers
produits mais à l'intérieur de cette page en utilisant simplement cette traction pour rafraîchir le modèle où vous
faites glisser vers le bas puis recharges. Heureusement, c'est vraiment facile à faire dans React Native si vous
utilisez une liste plate ou une vue de défilement, car elle est intégrée à ces composants. Ici, dans l'écran de présentation des produits sur la liste plate,
vous pouvez l'implémenter en ajoutant simplement des accessoires à la liste plate. Le premier accessoire est sur le rafraîchissement, vous devez
ajouter et cela devrait
pointer vers une fonction qui est exécutée lorsque l'utilisateur tire vers le bas, donc lorsque l'utilisateur commence cette
action de traction pour rafraîchir l'annonce ici dans
l'écran de présentation des produits, nous pouvons bien sûr simplement pointer sur charger des produits
car c'est finalement la fonction qui
charge notre produit, donc c'est parfait.
Ici, nous pouvons simplement pointer sur les produits de charge. Maintenant, en ajoutant cela, nous obtenons automatiquement cette fonctionnalité, mais ici, nous
obtenons également une erreur, que l'accessoire rafraîchissant doit être défini parce que c'est l'autre chose que
vous devez toujours définir lorsque vous ajoutez une actualisation. La mise à jour de l'actualisation déverrouille automatiquement tout ce
comportement et
aussi ce joli spinner que vous obtenez par défaut, React Native fera tout cela pour vous, mais
il ne le fera que si vous ajoutez également l'accessoire rafraîchissant. L'accessoire rafraîchissant est nécessaire pour que React Native sache quand vous avez
terminé et cela devrait donc pointer sur variable, sur une variable avec état, donc sur un état qui indique si vous
chargez actuellement ou non et
bien sûr, c'est génial parce que nous avons notre accessoire isLoading ici, donc
cela nous dit si nous chargeons ou non. Nous aurons juste un problème,
si nous chargeons, je remplace tout le contenu de l'écran et ce
n'est bien sûr pas ce que je veux faire pour recharger. Nous allons donc résoudre ce problème et une solution simple pourrait être de supprimer la partie
set isLoading ici des produits de chargement, en la définissant à la fois sur true et sur false et à la place, uniquement pour la
charge initiale ici en cours d'utilisation, où nous déclenchons les produits de chargement lorsque le composant se charge, puis ici, en utilisant
cette syntaxe, définissez-le sur false une fois que nous avons terminé. Nous pouvons le faire parce que charger les produits renverra
une promesse car il a ce mot-clé async, donc il retourne une promesse et avec cela, nous obtenons le spinner de chargement quand
cela se charge initialement mais pas quand il se recharge et cela
signifie également que lorsque nous visitons ce page, nous ne voyons pas le spinner mais cela pourrait être bien.
Nous avons quand même du contenu là-bas et
si cela se met à jour après avoir visité cette page, cela pourrait être correct. Alors maintenant, nous ne définissons pas le chargement ici,
mais nous pouvons maintenant définir un état différent ici,
appelons-le isRefreshing peut-être et définissons isRefreshing. Ici, je veux gérer un
état qui est initialement faux, tout comme isLoading et
c'est
maintenant ce que je veux définir ici, donc set est actualisé à true ici et aussi ici après try catch, définissez-le sur
false une fois que vous avez terminé. Alors bien sûr, cela fonctionne de la même manière que isLoading mais maintenant
je n'utiliserai pas isRefreshing pour remplacer tout le contenu de l'écran mais isRefreshing peut maintenant être réinjecté dans la liste plate
sur cet accessoire rafraîchissant et donc lors de la charge initiale, cela fonctionne comme avant mais maintenant ici, nous obtenons cette
belle fonctionnalité Pull to Refresh, vous la voyez ici. Je peux tirer vers le bas, obtenir ce spinner et cela se rechargera automatiquement
et je peux le prouver en le modifiant sur ce serveur. Si j'ajoute un calque supplémentaire ou quelques
points d'exclamation supplémentaires ici, nous pouvons obtenir ces points d'exclamation ici en tirant et en rafraîchissant, ici vous voyez cela
et la même chose bien sûr sur Android. Là, vous avez également obtenu cette fonctionnalité
prête à l'emploi et c'est ainsi que vous pouvez facilement ajouter la fonctionnalité Pull to Refresh à votre application React Native.