1
00:00:02,530 --> 00:00:07,540
Eh bien, pour atteindre nos autres écrans, nous avons besoin de quelque chose sur lequel nous pouvons cliquer, sur lequel nous pouvons appuyer.

2
00:00:07,600 --> 00:00:12,130
Plus tard, nous aurons notre grille de catégories ici et nous y travaillerons également dans ce

3
00:00:12,220 --> 00:00:15,990
module, mais juste pour commencer la navigation, j'ajouterai un bouton, donc sur l'écran

4
00:00:16,030 --> 00:00:21,850
des catégories où j'ai ce texte, je veux ajouter un bouton sur lequel je peux appuyer pour accéder à l'écran

5
00:00:21,850 --> 00:00:23,510
des repas de la catégorie.

6
00:00:23,980 --> 00:00:34,440
Alors ici, je vais ajouter ce bouton React Native, celui qui est intégré et définir un titre d'aller aux repas et lorsque nous appuyez

7
00:00:34,600 --> 00:00:41,630
sur ce bouton, je veux déclencher une fonction qui m'amène réellement à l'écran de la catégorie

8
00:00:41,660 --> 00:00:42,890
des repas.

9
00:00:42,890 --> 00:00:45,610
Maintenant, nous configurons cet écran de

10
00:00:45,620 --> 00:00:53,040
catégorie de repas ici, mais comment pouvons-nous maintenant y aller? Eh bien pour cela, il est important de savoir que tout

11
00:00:53,040 --> 00:01:00,360
composant que vous avez chargé à l'aide de la navigation React reçoit automatiquement un accessoire spécial, donc tout composant mappé à l'un

12
00:01:00,360 --> 00:01:02,550
de vos identificateurs d'écran ici, donc

13
00:01:02,550 --> 00:01:09,390
dans ce cas, ces trois composants, obtiendront le accessoire spécial. Les composants imbriqués ne l'obtiennent pas automatiquement, uniquement

14
00:01:09,390 --> 00:01:14,850
les composants de niveau supérieur que vous avez mappés à des identificateurs dans vos navigateurs.

15
00:01:14,850 --> 00:01:16,800
C'est donc un accessoire spécial dont je parle,

16
00:01:16,800 --> 00:01:17,810
jetons un coup d'œil.

17
00:01:17,820 --> 00:01:23,790
Donc ici, dans les accessoires, nous pouvons l'extraire et commençons simplement par consigner les accessoires de la console ici, afin que nous

18
00:01:23,790 --> 00:01:27,510
puissions avoir une idée et pour l'instant afin de ne pas avoir d'erreur, je

19
00:01:27,510 --> 00:01:30,480
vais simplement passer une fonction vide ici à onPress .

20
00:01:30,480 --> 00:01:33,600
Sauvegardons donc cela et voyons ce qu'il y a à l'intérieur des accessoires.

21
00:01:33,690 --> 00:01:39,660
Cette recharge, nous avons le bouton qui ne fait rien et ici dans la console, on voit bien que les accessoires ne

22
00:01:39,720 --> 00:01:40,800
sont pas vides.

23
00:01:40,800 --> 00:01:42,030
C'est notre

24
00:01:42,030 --> 00:01:48,400
objet d'accessoires et là nous avons un accessoire de navigation qui lui-même est un objet qui

25
00:01:48,420 --> 00:01:58,980
a des actions, d'accord mais qui a aussi par exemple pop, push, replace, reset et une fonction de navigation, donc un tas de fonctions là-dedans, des

26
00:01:58,980 --> 00:02:03,090
fonctions qui nous aident à nous déplacer dans notre application.

27
00:02:03,450 --> 00:02:09,670
Il a également un accessoire d'écran, donc notre accessoire a des accessoires d'écran que nous pouvons ignorer pour l'instant.

28
00:02:09,690 --> 00:02:17,160
Donc, ce qui est à l'intérieur des accessoires et cet accessoire de navigation, cette partie de navigation qui

29
00:02:17,520 --> 00:02:18,680
s'y trouve,

30
00:02:18,690 --> 00:02:25,350
nous aide vraiment, donc cet accessoire de navigation. Cela nous aide ici parce que lorsque nous appuyons sur ce bouton et

31
00:02:25,370 --> 00:02:30,270
je le ferai avec une fonction de flèche en ligne ici, bien sûr, vous pourriez avoir une fonction distincte que

32
00:02:30,270 --> 00:02:32,010
vous créez et que vous mappez

33
00:02:32,010 --> 00:02:35,430
ensuite sur onPress, cela nous aide et cela peut être utilisé pour naviguer.

34
00:02:35,490 --> 00:02:42,210
Donc, sur la navigation des accessoires, la navigation est cet accessoire spécial que nous obtenons par React navigation parce que

35
00:02:42,210 --> 00:02:46,390
nous avons chargé ce composant d'écran de catégories avec l'aide de notre

36
00:02:46,740 --> 00:02:50,900
navigateur ici, cet accessoire de navigation spécial a une méthode de navigation

37
00:02:50,910 --> 00:02:53,040
et c'est votre méthode principale,

38
00:02:53,040 --> 00:03:01,620
la plus importante méthode pour se déplacer à l'aide de la navigation React. Comment fonctionne la navigation?

39
00:03:02,490 --> 00:03:12,040
Naviguer prend un objet comme argument et dans cet objet, vous pouvez configurer le nom de l'itinéraire vers lequel vous

40
00:03:12,040 --> 00:03:13,150
souhaitez naviguer.

41
00:03:13,240 --> 00:03:19,720
Donc, vous passez une propriété de nom de route dans cet objet que vous passez pour naviguer et maintenant important, le nom

42
00:03:19,720 --> 00:03:25,540
de route que vous spécifiez ici doit être l'un des trois noms de route que j'ai définis ici.

43
00:03:25,720 --> 00:03:31,450
Les noms de route sont maintenant les identifiants que vous affichez choisis devant ces deux-points, donc les noms de propriété dans cet

44
00:03:31,450 --> 00:03:34,420
objet que vous avez transmis pour créer le navigateur de pile.

45
00:03:34,420 --> 00:03:36,660
Ce sont les noms de vos itinéraires

46
00:03:36,670 --> 00:03:42,900
et c'est ce que vous pouvez maintenant utiliser pour naviguer. Alors ici, je veux aller à la catégorie repas,

47
00:03:42,900 --> 00:03:44,690
c'est le nom de

48
00:03:44,690 --> 00:03:48,340
l'itinéraire que je veux utiliser, donc ici, je pointe vers

49
00:03:48,410 --> 00:03:56,000
la catégorie repas mais pas comme ça, cela en Javascript chercherait une variable de catégorie repas, au lieu d'une chaîne nommée repas

50
00:03:56,180 --> 00:04:02,450
de catégorie, car cela indiquera à la fin à Javascript et à la navigation React que vous voulez

51
00:04:02,450 --> 00:04:08,470
aller sur l'itinéraire qui a le nom de la catégorie de repas et c'est cet itinéraire ici.

52
00:04:08,470 --> 00:04:10,720
Alors maintenant, voici comment vous pouvez y aller.

53
00:04:13,730 --> 00:04:21,530
Si nous enregistrons maintenant cela et que nous cliquons sur Aller aux repas ici, vous voyez que nous allons à l'écran des repas, nous obtenons

54
00:04:21,530 --> 00:04:27,020
cette belle animation hors de la boîte, nous obtenons ce bouton de retour qui ressemble exactement à

55
00:04:27,020 --> 00:04:33,650
ce à quoi nous nous attendrions. iOS et tout cela fonctionne hors de la boîte sans aucun travail supplémentaire, pas de vérification

56
00:04:33,650 --> 00:04:38,890
si, pas de code d'animation manuel, nous obtenons cela grâce à la bibliothèque de navigation React.

57
00:04:38,990 --> 00:04:45,800
Donc, avec cela, nous pouvons aller et revenir à notre écran de repas, à l'écran de catégorie de repas, puis revenir à

58
00:04:45,800 --> 00:04:52,130
l'écran de catégorie et cela fonctionne également sur Android. Là, nous obtenons la navigation de routage spécifique à Android qui

59
00:04:52,400 --> 00:04:57,620
semble un peu différente de celle sur iOS, c'est l'animation de navigation que vous attendez sur Android, bien sûr,

60
00:04:57,620 --> 00:05:01,550
vous pouvez également utiliser le bouton de retour de l'appareil pour revenir en arrière.

61
00:05:01,550 --> 00:05:08,600
Voici donc comment vous pouvez naviguer vers un autre écran et notez également que la navigation ne dit bien

62
00:05:08,600 --> 00:05:15,530
sûr rien sur la direction que nous voulons prendre, elle ne dit pas à React navigation s'il doit

63
00:05:15,530 --> 00:05:22,490
jouer cette animation avant ou cette animation arrière . React navigation le détecte automatiquement car sous le capot,

64
00:05:22,550 --> 00:05:29,120
il gère cette pile de pages dont je parlais, cette pile d'écrans et dans cette pile, en ce

65
00:05:29,120 --> 00:05:35,060
moment quand on démarre l'application, on n'a que l'écran catégorie mais quand j'appuie sur ce bouton ,

66
00:05:35,420 --> 00:05:42,050
naviguer à la fin indique à React navigation que puisque nous faisons cela à l'intérieur d'un composant qui a

67
00:05:42,050 --> 00:05:47,570
été chargé avec un navigateur de pile, nous voulons naviguer vers un écran différent qui

68
00:05:47,600 --> 00:05:53,810
devrait être poussé en haut de la pile. Il s'agit simplement du comportement par défaut et, par conséquent, il sait qu'il

69
00:05:53,840 --> 00:05:59,690
veut avancer car un nouvel itinéraire a été poussé, ce qui signifie qu'il est ajouté à la pile, nous voulons avancer et lorsque

70
00:05:59,690 --> 00:06:06,080
nous cliquons sur le bouton de retour qu'il ajoute automatiquement, il fait disparaître cet écran de la pile et comme il supprime quelque chose de la

71
00:06:06,170 --> 00:06:10,700
pile, il sait qu'il doit lire l'animation arrière. C'est donc ce qui se passe dans

72
00:06:10,700 --> 00:06:14,870
les coulisses, vous n'avez pas vraiment besoin de vous en soucier et c'est

73
00:06:14,960 --> 00:06:20,330
la bonne chose, je veux juste que vous en soyez conscient, que la navigation React fait le

74
00:06:20,330 --> 00:06:27,980
gros du travail pour vous là-bas et gère cette pile de écran et les animations dont vous avez besoin donc sous le capot pour vous.

75
00:06:28,120 --> 00:06:32,990
D'accord, cela nous permet de faire des allers-retours ou des allers-retours.

76
00:06:32,990 --> 00:06:39,260
Maintenant, votre défi pour la prochaine conférence où nous le ferons ensemble est que vous fassiez de même sur

77
00:06:39,260 --> 00:06:44,270
l'écran des repas de la catégorie et assurez-vous que nous pouvons également accéder au

78
00:06:44,270 --> 00:06:47,990
MealDetailScreen à partir de là. Cela ne devrait pas être trop difficile, dans la prochaine conférence, nous le ferons ensemble.