1
00:00:02,250 --> 00:00:08,640
Je veux commencer avec la forme de navigation la plus basique et aussi la forme de navigation la plus courante que

2
00:00:08,640 --> 00:00:14,820
vous avez dans n'importe quelle application mobile et c'est comment aller et venir entre les écrans et pour cela va

3
00:00:14,820 --> 00:00:19,030
mettre en place une soi-disant pile et navigateur parce que pages ou écrans.

4
00:00:19,110 --> 00:00:21,630
Je vais utiliser ces mots comme synonymes ici.

5
00:00:21,630 --> 00:00:26,040
Les pages et les écrans sont donc essentiellement gérés sur une pile de pages.

6
00:00:26,250 --> 00:00:32,220
Et chaque fois que vous accédez à un nouvel écran, il sera poussé au-dessus de cette pile. L'écran le plus haut

7
00:00:32,220 --> 00:00:34,570
d'une pile est toujours l'écran qui est visible.

8
00:00:34,650 --> 00:00:39,710
Et lorsque vous cliquez ensuite sur le bouton de retour, cet écran sur lequel vous étiez était sauté.

9
00:00:39,840 --> 00:00:45,600
Et puisque vous voyez toujours sur l'application l'écran le plus haut, vous verrez l'écran en dessous de celui

10
00:00:45,600 --> 00:00:46,950
dont vous venez.

11
00:00:46,950 --> 00:00:49,370
C'est pourquoi il s'appelle Stack Navigator.

12
00:00:49,390 --> 00:00:50,490
Voilà la fureur.

13
00:00:50,490 --> 00:00:53,100
Utilisons-le simplement et cela deviendra très clair.

14
00:00:53,370 --> 00:00:55,080
Nous avons importé de React.

15
00:00:55,080 --> 00:00:59,870
La navigation et son nom étaient le nom de la fonction.

16
00:00:59,880 --> 00:01:05,550
Nous devons réellement créer un tel navigateur de pile, c'est créer un navigateur de pile.

17
00:01:05,550 --> 00:01:11,890
Maintenant, une note importante, cette syntaxe est correcte si vous utilisez la version de navigation gratuite de Rea si vous

18
00:01:11,910 --> 00:01:17,880
utilisez l'aversion de navigation React car elle a légèrement changé, vous devez installer un package supplémentaire comme mentionné

19
00:01:17,880 --> 00:01:19,620
dans une conférence plus tôt.

20
00:01:20,700 --> 00:01:29,610
Vous devez exécuter npm installer dash dash enregistrer réagir dash navigation dash stack et installer ce package supplémentaire et avec celui-ci installé vous importez créer pile navigateur

21
00:01:30,390 --> 00:01:36,990
à partir de react as navigation dash stack au lieu de react navigation qui est un ajustement mineur que vous

22
00:01:36,990 --> 00:01:42,900
n'avez pas à faire quatre créer un navigateur de pile et lorsque nous créons nos navigateurs, par

23
00:01:42,900 --> 00:01:49,140
exemple les taps ou dessiner le navigateur plus tard, vous aurez les packages respectifs dont vous avez besoin

24
00:01:49,140 --> 00:01:54,990
pour installer React Dash Dash Taps et ainsi de suite, tout cela est couvert dans la leçon

25
00:01:55,020 --> 00:01:57,370
que vous trouverez avant cette leçon.

26
00:01:57,460 --> 00:02:03,150
Maintenant, ici, j'ai enregistré ce cours avec la version React Navigation gratuite qui, autrement, est exactement la

27
00:02:03,150 --> 00:02:03,520
même.

28
00:02:03,510 --> 00:02:08,370
Ce n'est que l'importation qui diffère et donc je vais importer de React Navigation ici.

29
00:02:08,430 --> 00:02:14,310
Mais si vous suivez la version 4, il s'agit de réagir à la pile de tirets de navigation et d'un paquet

30
00:02:14,300 --> 00:02:15,730
supplémentaire que vous devez installer.

31
00:02:15,870 --> 00:02:22,020
Voilà comment fonctionne la navigation de réaction cette bibliothèque vous créez des soi-disant navigateurs qui sont à la fin

32
00:02:22,030 --> 00:02:30,090
juste vous pourriez dire que les objets réagissent réellement aux composants car il se trouvera qui contient toute la configuration de navigation qui contient

33
00:02:30,090 --> 00:02:34,860
toutes les informations des différents écrans que vous avez et qui fera le gros

34
00:02:34,860 --> 00:02:40,350
du travail en chargeant différents écrans et en jouant de belles transitions fluides pour passer de

35
00:02:40,350 --> 00:02:42,270
A à B pour vous.

36
00:02:42,270 --> 00:02:49,710
Nous devons donc importer créer un navigateur de pile, puis nous pouvons simplement appeler cela maintenant, créer un navigateur de pile prend au moins

37
00:02:49,710 --> 00:02:56,130
un argument et c'est un objet javascript où nous configurons les différents écrans que nous voulons pouvoir déplacer entre maintenant

38
00:02:56,220 --> 00:03:02,940
et cette application que je veux pour commencer sur l'écran des catégories et si je tape sur une catégorie là-bas, je

39
00:03:02,940 --> 00:03:09,450
veux aller à l'écran des repas de catégorie et si je tape ensuite sur une recette là-bas sur un repas,

40
00:03:09,450 --> 00:03:16,530
je veux aller à l'écran de détail du repas donc nous en aurons besoin trois écrans dans notre navigateur de pile afin

41
00:03:16,770 --> 00:03:23,610
que ce soient les trois écrans que vous pouvez parcourir en utilisant ce modèle de pile en vous poussant les pages

42
00:03:23,610 --> 00:03:30,300
et en les sautant et pourquoi n'avons-nous pas besoin de favoris et de filtres parce que des filtres seront ajoutés plus

43
00:03:30,300 --> 00:03:37,350
tard avec l'aide de une barre latérale ce sera une alternative à cette pile ici et des favoris aussi comme alternative à

44
00:03:37,350 --> 00:03:42,960
cette pile, nous pourrons y aller avec des robinets plus tard mais pas pour le moment.

45
00:03:42,960 --> 00:03:48,990
Commençons donc avec cette navigation de base basée sur la pile où nous pouvons aller et venir

46
00:03:48,990 --> 00:03:56,850
entre les catégories écran catégorie repas Écran et vous détaillerez l'écran, nous informons la navigation de réaction sur ces trois écrans en les

47
00:03:57,180 --> 00:04:05,500
enregistrant comme paires de valeurs clés, vous prenez n'importe quel identifiant n'importe quel nom votre choix pour des catégories d'exemple, mais ce nom est

48
00:04:05,530 --> 00:04:11,500
à vous car une convention de nom de propriété est de commencer par un caractère majuscule ici,

49
00:04:11,500 --> 00:04:14,470
mais vous n'avez pas à le faire techniquement.

50
00:04:14,650 --> 00:04:20,620
Donc, vous utilisez n'importe quel identifiant que vous voulez comme nom de propriété dans cet objet

51
00:04:20,740 --> 00:04:29,920
que vous passez pour créer un navigateur de pile et maintenant la valeur dans sa forme la plus simple est simplement un pointeur sur le

52
00:04:29,920 --> 00:04:34,690
composant de react que vous souhaitez charger comme écran pour cet écran.

53
00:04:34,690 --> 00:04:43,890
Donc, dans mon cas, ce serait l'écran des catégories tout importer cet écran toutes les catégories d'importation à partir de l'écran de

54
00:04:44,760 --> 00:04:51,740
catégorie des écrans Je peux importer cela car il s'agit de mon exportation par défaut.

55
00:04:51,940 --> 00:04:59,410
Alors maintenant, nous mappons ces deux catégories et cela nous permet de dire plus tard à React Navigation que la

56
00:04:59,410 --> 00:05:02,920
bibliothèque que nous utilisons doit charger l'écran de catégorie.

57
00:05:02,920 --> 00:05:08,690
Maintenant, comme je l'ai dit, ce n'est pas le seul écran dont j'ai besoin, je veux aussi avoir la catégorie repas.

58
00:05:08,710 --> 00:05:14,590
Ce sont donc les systèmes du deuxième écran Cet écran présentera tous les repas de la catégorie choisie pour lesquels

59
00:05:15,310 --> 00:05:21,550
nous avons un certain nombre de composants et c'est l'écran de repas de catégorie que nous avons préparé que nous importons à

60
00:05:21,550 --> 00:05:29,680
partir des écrans de l'écran de repas de catégorie, donc nous cartographions cette année maintenant par la façon dont j'ai mentionné qu'il s'agit de la forme la plus

61
00:05:29,680 --> 00:05:34,720
simple de mappage ayant simplement le nom de la propriété, puis un pointeur sur le composant que

62
00:05:35,290 --> 00:05:42,040
vous souhaitez charger, vous pouvez également passer l'objet ici à la place et définir la propriété screen sur cet objet, puis pointer sur

63
00:05:42,100 --> 00:05:44,470
at le composant que vous souhaitez charger.

64
00:05:44,470 --> 00:05:46,030
Maintenant, pourquoi feriez-vous cela?

65
00:05:46,090 --> 00:05:52,540
Parce que maintenant, vous pouvez également configurer une configuration supplémentaire ici en plus de l'écran, vous pouvez configurer des options par

66
00:05:52,540 --> 00:05:57,220
défaut pour l'écran et ainsi de suite, mais ce n'est pas quelque chose dont nous

67
00:05:57,730 --> 00:06:02,740
devons nous inquiéter pour le moment, nous nous en occuperons plus tard dans ce module Je

68
00:06:02,740 --> 00:06:08,230
veux juste déjà mentionner que c'est le raccourci, c'est la forme la plus longue de dire à Reaction

69
00:06:08,230 --> 00:06:14,170
Navigation quels écrans doivent être chargés pour quel identifiant parlant, nous avons besoin d'un troisième identifiant bien sûr et

70
00:06:14,170 --> 00:06:21,060
c'est l'identifiant qui devrait charger notre écran détaillé. nommez-le détail du repas et je veux pointer vers l'écran détaillé de mon repas, donc

71
00:06:21,090 --> 00:06:29,110
je vais importer l'écran des détails du repas à partir de Et maintenant, allons dans le dossier screens et là, c'est l'écran détaillé du repas et

72
00:06:29,150 --> 00:06:31,760
encore une fois, j'utiliserai le raccourci ici.

73
00:06:31,760 --> 00:06:35,830
Nous pourrions utiliser ce formulaire plus long, mais je vais utiliser ce raccourci au point de l'écran détaillé du repas.

74
00:06:36,710 --> 00:06:40,370
Donc, avec cette configuration de base, nous disons réagir à la navigation.

75
00:06:40,370 --> 00:06:49,020
Hé, ce sont les écrans qui pourront se déplacer entre maintenant, mais les données seules ne feront pas grand-chose.

76
00:06:49,030 --> 00:06:49,540
Pourquoi.

77
00:06:49,840 --> 00:06:57,600
Parce que nous créons ce navigateur de pile mais que nous ne faisons rien avec lui, modifions ce navigateur de pile

78
00:06:58,080 --> 00:07:05,150
de création qui retourne en fait un conteneur de navigation et qui se révèle être un composant réactif.

79
00:07:05,150 --> 00:07:07,070
Tout est nommé navigateur de repas.

80
00:07:07,080 --> 00:07:10,620
Cela ressemble à un nom approprié parce que c'est ce que nous avons à la fin ici.

81
00:07:10,620 --> 00:07:15,570
Et maintenant, nous stockons le composant React créé par le navigateur de pile, qui est fondamentalement

82
00:07:15,570 --> 00:07:22,380
un composant React avec toutes les tâches lourdes liées au chargement de différents écrans et à la lecture des animations, ce composant

83
00:07:22,380 --> 00:07:25,160
React est stocké dans le navigateur de repas.

84
00:07:25,170 --> 00:07:32,830
Maintenant, nous pouvons exporter le navigateur de repas ici et essayer de l'utiliser comme ceci et nous capturer pour le rendre à

85
00:07:32,830 --> 00:07:38,410
l'écran et voir ce qui se passe, mais en réalité, la navigation fonctionne un peu différemment.

86
00:07:38,470 --> 00:07:45,350
Vous devez également créer un conteneur d'application dans ce conteneur d'application dont vous avez besoin pour envelopper votre itinéraire.

87
00:07:45,440 --> 00:07:50,370
Donc, votre navigateur principal dans ce cas, nous n'en avons qu'un, nous n'avons qu'à empiler Navigator.

88
00:07:50,390 --> 00:07:51,900
Alors, enveloppons-le avec.

89
00:07:51,980 --> 00:07:57,740
Emballons la navigation dans les repas ou recréez-la en appelant create container d'application, puis passez simplement

90
00:07:57,740 --> 00:08:01,850
le navigateur de repas en tant qu'argument create container d'application.

91
00:08:01,940 --> 00:08:03,880
Crée également un conteneur de navigation.

92
00:08:03,950 --> 00:08:05,670
Vous donne donc également un composant React.

93
00:08:05,750 --> 00:08:08,120
Mais ce n'est pas vraiment le composant React.

94
00:08:08,120 --> 00:08:15,890
Vous devez utiliser dans votre code ASX car il contient désormais toutes les métadonnées sur la navigation en général sur

95
00:08:15,890 --> 00:08:17,930
la navigation de réaction, etc.

96
00:08:17,930 --> 00:08:24,680
Donc, c'est simplement un modèle dont vous avez besoin pour envelopper votre itinéraire avec votre navigateur le plus important et utiliser ce composant

97
00:08:24,680 --> 00:08:30,260
return react dans votre code J is X, puis fait essentiellement la configuration que vous aurez toujours lorsque vous

98
00:08:30,260 --> 00:08:35,570
travaillerez avec Reaction Navigation plus tard, vous apprendrez également comment utiliser plusieurs navigateurs dans une seule application.

99
00:08:35,570 --> 00:08:41,870
Soit dit en passant, pour l'instant, nous avons celui-ci et nous exportons ce composant qui est la fin crée.

100
00:08:41,870 --> 00:08:44,680
Alors maintenant, dans la chasse aux applications, nous pouvons commencer à utiliser ce composant.

101
00:08:44,720 --> 00:08:56,720
Nous avons donc vu quelque chose à l'écran pour cela allons-y et importons le navigateur de repas à partir du navigateur de

102
00:08:56,930 --> 00:08:58,640
repas de navigation.

103
00:08:58,640 --> 00:09:04,040
Maintenant, comme je l'ai mentionné, le navigateur de repas est maintenant juste un composant de réaction, donc à la fin ce que nous pouvons faire,

104
00:09:04,040 --> 00:09:08,390
c'est que nous pouvons simplement le retourner au lieu de retourner notre point de vue avec notre texte ici.

105
00:09:08,420 --> 00:09:13,550
Je reviendrai navigateur de repas et comme c'est un composant réactif, je peux simplement piloter

106
00:09:13,550 --> 00:09:18,020
du code de J Isaac comme celui-ci avec papa si nous enregistrons cela.

107
00:09:18,160 --> 00:09:20,890
Nous examinons notre application lors du rechargement

108
00:09:24,290 --> 00:09:27,040
et vous devrez peut-être recharger manuellement votre application.

109
00:09:27,040 --> 00:09:33,490
Vous devriez voir l'écran des catégories une fois rechargé et cela est bien sûr énorme car cela signifie

110
00:09:34,000 --> 00:09:35,360
que cela fonctionne.

111
00:09:35,440 --> 00:09:41,710
Maintenant, veuillez également noter que vous avez tous par défaut un bel en-tête qui a le look de plate-forme par défaut

112
00:09:41,710 --> 00:09:49,180
pour les E / S, il est propre et plat a cette fine ligne en dessous pour Android, il est plus libre car il a

113
00:09:49,180 --> 00:09:50,720
une légère ombre portée.

114
00:09:50,770 --> 00:09:55,600
Maintenant, bien sûr, il manque un titre et vous apprendrez comment nous pouvons en ajouter un dans

115
00:09:55,600 --> 00:10:01,450
ce module, mais nous le sortons de la boîte et cela respecte automatiquement tous les crans que vous pourriez avoir à rester

116
00:10:01,450 --> 00:10:07,060
aussi loin que vous avez ici, donc il utilise automatiquement un tel vue de zone sûre et c'est tout ce que

117
00:10:07,060 --> 00:10:12,520
j'ai mentionné dans le dernier module de cours pendant que vous avez ce composant et vous en avez parfois besoin

118
00:10:12,520 --> 00:10:19,360
par exemple lorsque vous créez une application avec React Navigation Navigation Reaction encapsule déjà vos vues dans une vue de zone sûre au moins une

119
00:10:19,360 --> 00:10:24,430
grande partie du travail que vous auriez à faire autrement, cela vous assurera que votre en-tête est bon

120
00:10:24,430 --> 00:10:29,890
et c'est une grande chose, car la création manuelle d'un en-tête qui a l'air bien sur tous les appareils est

121
00:10:29,890 --> 00:10:31,650
en fait un peu de travail.

122
00:10:31,840 --> 00:10:33,210
Voilà donc ce que nous obtenons ici.

123
00:10:33,220 --> 00:10:36,550
La question évidente est maintenant de savoir comment atteindre nos autres écrans.