1
00:00:02,340 --> 00:00:08,460
Il est important de comprendre le fonctionnement de la navigation et des applications natives et surtout si vous avez une formation

2
00:00:08,460 --> 00:00:14,400
en développement Web, il est important de comprendre en quoi elle diffère de la navigation entre les écrans et le Web,

3
00:00:14,460 --> 00:00:20,760
car sur le Web, vous entrez réellement un vous êtes L et si vous construisez une application de réaction, vous utilisez un

4
00:00:20,760 --> 00:00:24,240
outil comme réagir le routeur pour ensuite charger le composant utilisateurs.

5
00:00:24,240 --> 00:00:30,640
Et si vous cliquez à nouveau sur un lien qui mène à mon site, les produits slash dot com, le routeur react, qui est une bibliothèque supplémentaire dans laquelle vous avez installé,

6
00:00:30,660 --> 00:00:37,950
voit que vous changez le chemin dans votre U. R. L. et charge un composant de

7
00:00:37,950 --> 00:00:38,820
réaction différent.

8
00:00:38,850 --> 00:00:40,800
Voilà comment fonctionne la navigation sur le Web.

9
00:00:40,890 --> 00:00:47,880
Donc, vous êtes L est votre source de vérité et changer que vous êtes peut être capté par des bibliothèques comme

10
00:00:47,880 --> 00:00:51,220
Reactor Router qui ont ensuite rendu différents composants à l'écran.

11
00:00:51,240 --> 00:00:53,910
C'est ainsi que je réagis pour les œuvres Web.

12
00:00:54,030 --> 00:00:57,990
Maintenant, il y a une différence importante lorsque nous pensons aux applications natives.

13
00:00:58,070 --> 00:01:05,070
Nous n'avons aucun vous êtes les utilisateurs ell ne vont pas dans votre application en entrant certains vous êtes L au lieu de

14
00:01:05,070 --> 00:01:09,510
cela vous appuyez sur les boutons vos pressions et vous allez et vient.

15
00:01:09,540 --> 00:01:16,050
Vous avez des boutons arrière, vous avez des tiroirs latéraux, c'est ainsi que vous naviguez sur les applications mobiles pour être précis.

16
00:01:16,050 --> 00:01:19,720
Comme je l'ai mentionné, avoir des robinets est un modèle courant que vous voyez là-bas.

17
00:01:19,770 --> 00:01:25,170
Le modèle commun moyen est que vous naviguez dans une pile de pages et cela signifie simplement que vous allez

18
00:01:25,170 --> 00:01:31,770
sur une page que vous cliquez sur un élément, que vous accédez à un nouvel écran et que vous obtenez automatiquement un bouton de

19
00:01:31,770 --> 00:01:36,210
retour en haut ou sur Android, vous bien sûr, en avoir un intégré dans l'appareil.

20
00:01:36,210 --> 00:01:41,850
Et lorsque vous appuyez sur ce bouton, vous êtes retourné à la page sur laquelle vous vous trouviez auparavant et vous obtenez une

21
00:01:41,850 --> 00:01:43,100
transition en douceur pour cela.

22
00:01:43,140 --> 00:01:48,660
Ainsi, vous pouvez naviguer par exemple pour charger un composant utilisateur en appuyant sur l'onglet ou en appuyant sur

23
00:01:48,870 --> 00:01:54,270
un élément spécial et en y naviguant et l'allégation semble et se sent tout simplement un peu différente

24
00:01:54,270 --> 00:01:55,390
pour les utilisateurs.

25
00:01:55,500 --> 00:02:00,700
Maintenant, bien sûr, nous voulons également apporter cette apparence à notre application native ReACT.

26
00:02:00,780 --> 00:02:02,570
Et heureusement, c'est très facile.

27
00:02:02,580 --> 00:02:09,310
Avec l'aide d'une bibliothèque tierce, nous utiliserons la bibliothèque tierce qui l'utilisera pour

28
00:02:09,310 --> 00:02:16,630
cela J'ai arrêté mon serveur exposé ici, c'est réagir à la navigation, nous pouvons l'installer

29
00:02:16,720 --> 00:02:24,280
avec npm installer un tiret tableau de bord il s'agit en fait d'une bibliothèque de navigation

30
00:02:24,310 --> 00:02:26,660
conçue pour réagir nativement.

31
00:02:26,680 --> 00:02:33,370
Maintenant, vous pouvez également l'utiliser dans des applications Web, mais son objectif principal est les applications natives construites avec React Native.

32
00:02:33,370 --> 00:02:40,330
Donc, même si cela s'appelle la navigation React, c'est pour React Native, pas seulement pour React pour le Web.

33
00:02:40,870 --> 00:02:46,330
Nous pouvons donc simplement installer ce package ici dans notre application pour commencer à l'utiliser.

34
00:02:46,330 --> 00:02:51,130
Et bien sûr, je vais vous enseigner les tenants et aboutissants de ce package et comment l'utiliser pour

35
00:02:51,130 --> 00:02:53,200
différents modèles de navigation dans ce module.

36
00:02:53,200 --> 00:02:56,590
Mais si vous voulez plonger plus profondément ou si vous voulez également avoir un guide écrit.

37
00:02:56,590 --> 00:03:02,280
Découvrez également le point de navigation Reaic ORIC qui est la page officielle de ce package où vous

38
00:03:02,290 --> 00:03:06,000
pouvez plonger sur les quais pour tout savoir sur ce package.

39
00:03:06,040 --> 00:03:09,400
Là, vous pouvez tout lire en détail.

40
00:03:09,430 --> 00:03:13,320
Vous apprendrez à l'utiliser, à le configurer, etc.

41
00:03:13,330 --> 00:03:19,360
Il y a beaucoup de choses que vous pouvez faire avec et même si je couvrirai la majorité de cela ici,

42
00:03:19,360 --> 00:03:21,680
c'est une excellente ressource pour vous d'approfondir.

43
00:03:21,760 --> 00:03:28,390
Maintenant, une chose que nous voyons ici que nous devons absolument faire est d'exécuter cette commande utilisateur qui installe

44
00:03:28,390 --> 00:03:32,350
un tas de dépendances supplémentaires pour répondre aux besoins de navigation.

45
00:03:32,510 --> 00:03:39,670
Donc, copiez simplement cette commande à partir de la page Mise en route

46
00:03:39,670 --> 00:03:46,180
ici et exécutez-la dans votre projet sur la ligne de commande

47
00:03:46,180 --> 00:03:52,210
du terminal intégré. sélectionnera les versions spécifiques de ces packages

48
00:03:52,300 --> 00:03:56,540
qui fonctionnent avec votre version Expo spécifique.

49
00:03:56,590 --> 00:04:01,750
C'est donc une version plus sûre de l'installation de npm que vous pourriez dire et il est donc recommandé de

50
00:04:01,750 --> 00:04:02,370
l'utiliser ici.

51
00:04:02,380 --> 00:04:07,600
Maintenant, une note supplémentaire sur cette commande et cette page en général en haut à gauche de cette page, vous voyez

52
00:04:07,600 --> 00:04:09,240
la version de navigation de React.

53
00:04:09,250 --> 00:04:16,670
Ces documents sont liés à la réutilisation dans ce cours alors qu'en 3 ou 4 ils sont à peu près les mêmes.

54
00:04:16,690 --> 00:04:22,570
Nous n'utilisons pas alors qu'en 5 en ce moment car la version 5 utilise une syntaxe légèrement différente que nous ne

55
00:04:22,580 --> 00:04:24,280
couvrons pas pour le moment.

56
00:04:24,280 --> 00:04:30,760
Assurez-vous donc que si vous revenez aux documents, vous sélectionnez réellement la version 4 ou libre de la documentation

57
00:04:30,760 --> 00:04:32,500
ici pour suivre en douceur.

58
00:04:32,530 --> 00:04:37,300
Bien sûr, vous pouvez toujours jeter un œil à la version 5 et essayer manuellement de vous ajuster au code

59
00:04:37,480 --> 00:04:42,720
si vous le souhaitez, mais pour une expérience fluide, où se concentrer, bien sûr, sur React Native et non sur Reaction Navigation.

60
00:04:42,820 --> 00:04:45,160
Assurez-vous de choisir la version 4 ou l'année gratuite.

61
00:04:45,220 --> 00:04:50,560
C'est juste une petite note latérale au cas où vous vous interrogeriez sur la différence entre les documents ici et

62
00:04:50,560 --> 00:04:56,720
ce que vous voyez dans ce cours.Maintenant, une note importante, alors que nous nous en tenons à la navigation de réaction, nous

63
00:04:56,720 --> 00:04:57,550
sommes pour.

64
00:04:57,560 --> 00:05:05,540
Ici plus tard dans le cours, j'aurai un module complet sur React Navigation Five et plus tard où je vous

65
00:05:05,540 --> 00:05:10,100
montrerai comment convertir votre projet pour utiliser cette dernière version.

66
00:05:10,100 --> 00:05:16,130
Vous aviez donc le meilleur des deux mondes et vous apprendrez les deux types de configuration de la navigation et

67
00:05:16,130 --> 00:05:22,400
de la navigation et réagissez aux applications natives parce que les deux et pour tout futur où elle aura cinq ans

68
00:05:22,760 --> 00:05:25,180
et plus sera très important à connaître.

69
00:05:25,250 --> 00:05:30,890
Copions simplement cette commande et assurons-nous qu'outre l'installation de React Navigation qui est le package

70
00:05:30,890 --> 00:05:36,830
de base, nous installons bien sûr ces packages dans le projet en exécutant Expo install ici

71
00:05:36,830 --> 00:05:43,570
maintenant avec l'installation terminée ici Je peux redémarrer mon serveur Expo avec le démarrage de NPM et nous

72
00:05:43,570 --> 00:05:46,540
pouvons maintenant commencer à utiliser React Navigation.

73
00:05:46,540 --> 00:05:51,550
Maintenant, pour tout cela, échangez un nouveau dossier dans mon projet et je l'appellerai navigation.

74
00:05:51,550 --> 00:05:57,140
Ce n'est pas quelque chose que vous devez faire, mais cela peut vous aider à garder votre code propre, car là-dedans.

75
00:05:57,140 --> 00:06:03,600
Je vais créer un nouveau fichier tout créer mon navigateur de repas dot J fall.

76
00:06:03,640 --> 00:06:05,590
Maintenant, ce nom de fichier dépend entièrement de vous.

77
00:06:05,620 --> 00:06:12,970
Je veux juste indiquer que là-bas, je vais configurer la configuration de ma navigation pour mon application de repas

78
00:06:12,970 --> 00:06:14,690
ici que je construis.

79
00:06:14,710 --> 00:06:16,630
Voilà pourquoi un nom comme ça.

80
00:06:16,630 --> 00:06:22,420
Et c'est l'automne de navigateur de repas jazz où je veux mettre en place ma configuration de navigation

81
00:06:22,420 --> 00:06:29,530
de puits Je veux dire à Reaction Navigation que la bibliothèque nous avons installé quels différents écrans nous avons comment ils sont connectés

82
00:06:29,830 --> 00:06:32,880
et comment nous voulons pouvoir se déplacer entre eux.

83
00:06:33,190 --> 00:06:36,670
Maintenant, il est plus facile de voir cela que de simplement en parler.

84
00:06:36,730 --> 00:06:41,350
Par conséquent, dans le navigateur de repas, commençons à configurer la navigation.