1
00:00:02,180 --> 00:00:03,960
Voilà donc notre application ici.

2
00:00:04,190 --> 00:00:08,750
Maintenant, dans cette application, nous avons ajouté beaucoup de fonctionnalités, mais il y a une chose que

3
00:00:08,750 --> 00:00:10,910
je veux ajouter et c'est tirer pour rafraîchir.

4
00:00:10,910 --> 00:00:14,640
Disons que je suis allé pouvoir récupérer tous les produits à l'intérieur de

5
00:00:14,720 --> 00:00:18,380
cette page, donc sans la quitter et revenir qui récupérera les derniers

6
00:00:18,470 --> 00:00:23,450
produits mais à l'intérieur de cette page en utilisant simplement cette traction pour rafraîchir le modèle où vous

7
00:00:23,450 --> 00:00:27,910
faites glisser vers le bas puis recharges. Heureusement, c'est vraiment facile à faire dans React Native si vous

8
00:00:27,920 --> 00:00:33,960
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,

9
00:00:34,000 --> 00:00:40,430
vous pouvez l'implémenter en ajoutant simplement des accessoires à la liste plate. Le premier accessoire est sur le rafraîchissement, vous devez

10
00:00:40,430 --> 00:00:42,500
ajouter et cela devrait

11
00:00:42,500 --> 00:00:48,860
pointer vers une fonction qui est exécutée lorsque l'utilisateur tire vers le bas, donc lorsque l'utilisateur commence cette

12
00:00:48,860 --> 00:00:51,900
action de traction pour rafraîchir l'annonce ici dans

13
00:00:52,060 --> 00:00:57,290
l'écran de présentation des produits, nous pouvons bien sûr simplement pointer sur charger des produits

14
00:00:57,320 --> 00:00:59,510
car c'est finalement la fonction qui

15
00:00:59,510 --> 00:01:01,610
charge notre produit, donc c'est parfait.

16
00:01:01,610 --> 00:01:09,620
Ici, nous pouvons simplement pointer sur les produits de charge. Maintenant, en ajoutant cela, nous obtenons automatiquement cette fonctionnalité, mais ici, nous

17
00:01:09,770 --> 00:01:15,260
obtenons également une erreur, que l'accessoire rafraîchissant doit être défini parce que c'est l'autre chose que

18
00:01:15,260 --> 00:01:21,980
vous devez toujours définir lorsque vous ajoutez une actualisation. La mise à jour de l'actualisation déverrouille automatiquement tout ce

19
00:01:22,010 --> 00:01:23,090
comportement et

20
00:01:23,090 --> 00:01:28,850
aussi ce joli spinner que vous obtenez par défaut, React Native fera tout cela pour vous, mais

21
00:01:28,850 --> 00:01:36,700
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

22
00:01:36,700 --> 00:01:43,270
terminé et cela devrait donc pointer sur variable, sur une variable avec état, donc sur un état qui indique si vous

23
00:01:43,270 --> 00:01:45,280
chargez actuellement ou non et

24
00:01:45,340 --> 00:01:49,530
bien sûr, c'est génial parce que nous avons notre accessoire isLoading ici, donc

25
00:01:49,840 --> 00:01:54,720
cela nous dit si nous chargeons ou non. Nous aurons juste un problème,

26
00:01:55,030 --> 00:01:59,680
si nous chargeons, je remplace tout le contenu de l'écran et ce

27
00:01:59,680 --> 00:02:08,260
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

28
00:02:08,260 --> 00:02:14,800
set isLoading ici des produits de chargement, en la définissant à la fois sur true et sur false et à la place, uniquement pour la

29
00:02:14,800 --> 00:02:20,530
charge initiale ici en cours d'utilisation, où nous déclenchons les produits de chargement lorsque le composant se charge, puis ici, en utilisant

30
00:02:20,590 --> 00:02:26,530
cette syntaxe, définissez-le sur false une fois que nous avons terminé. Nous pouvons le faire parce que charger les produits renverra

31
00:02:26,530 --> 00:02:32,720
une promesse car il a ce mot-clé async, donc il retourne une promesse et avec cela, nous obtenons le spinner de chargement quand

32
00:02:32,720 --> 00:02:36,050
cela se charge initialement mais pas quand il se recharge et cela

33
00:02:36,050 --> 00:02:41,330
signifie également que lorsque nous visitons ce page, nous ne voyons pas le spinner mais cela pourrait être bien.

34
00:02:41,340 --> 00:02:43,250
Nous avons quand même du contenu là-bas et

35
00:02:43,290 --> 00:02:50,190
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,

36
00:02:50,190 --> 00:02:53,480
mais nous pouvons maintenant définir un état différent ici,

37
00:02:53,550 --> 00:02:59,030
appelons-le isRefreshing peut-être et définissons isRefreshing. Ici, je veux gérer un

38
00:02:59,100 --> 00:03:04,200
état qui est initialement faux, tout comme isLoading et

39
00:03:04,200 --> 00:03:05,210
c'est

40
00:03:05,220 --> 00:03:17,370
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

41
00:03:17,380 --> 00:03:25,950
false une fois que vous avez terminé. Alors bien sûr, cela fonctionne de la même manière que isLoading mais maintenant

42
00:03:26,100 --> 00:03:32,760
je n'utiliserai pas isRefreshing pour remplacer tout le contenu de l'écran mais isRefreshing peut maintenant être réinjecté dans la liste plate

43
00:03:32,760 --> 00:03:39,360
sur cet accessoire rafraîchissant et donc lors de la charge initiale, cela fonctionne comme avant mais maintenant ici, nous obtenons cette

44
00:03:39,360 --> 00:03:45,720
belle fonctionnalité Pull to Refresh, vous la voyez ici. Je peux tirer vers le bas, obtenir ce spinner et cela se rechargera automatiquement

45
00:03:45,780 --> 00:03:51,000
et je peux le prouver en le modifiant sur ce serveur. Si j'ajoute un calque supplémentaire ou quelques

46
00:03:51,000 --> 00:03:57,890
points d'exclamation supplémentaires ici, nous pouvons obtenir ces points d'exclamation ici en tirant et en rafraîchissant, ici vous voyez cela

47
00:03:58,160 --> 00:04:03,530
et la même chose bien sûr sur Android. Là, vous avez également obtenu cette fonctionnalité

48
00:04:03,530 --> 00:04:10,280
prête à l'emploi et c'est ainsi que vous pouvez facilement ajouter la fonctionnalité Pull to Refresh à votre application React Native.