1
00:00:02,710 --> 00:00:07,840
Maintenant, nous avons regardé la navigation de base avec la navigation et la navigation est votre outil le

2
00:00:08,020 --> 00:00:13,720
plus important, mais en fait, lorsque vous êtes à l'intérieur d'un écran, d'un composant chargé à l'aide d'un navigateur de

3
00:00:13,870 --> 00:00:15,950
pile, vous avez des alternatives pour naviguer.

4
00:00:15,970 --> 00:00:22,450
Vous pouvez également utiliser push au lieu de naviguer, bien que cela ne prenne pas d'objet Javascript mais prend simplement

5
00:00:22,450 --> 00:00:24,240
le nom de l'itinéraire ici,

6
00:00:24,250 --> 00:00:30,280
dans ce cas, la catégorie repas comme premier argument et avec cela, vous obtiendrez le même comportement qu'auparavant.

7
00:00:30,610 --> 00:00:33,200
La question est bien sûr pourquoi voudriez-vous alors utiliser cela.

8
00:00:33,250 --> 00:00:37,960
Premièrement, c'est un peu plus court que naviguer parce que vous ne passez pas

9
00:00:37,960 --> 00:00:39,440
un objet mais ce

10
00:00:39,490 --> 00:00:47,880
n'est pas la raison principale, à la place, utiliser push ici peut être utile si vous voulez aller sur une page où vous êtes déjà.

11
00:00:47,960 --> 00:00:49,100
Maintenant, laissez-moi vous montrer ce que je veux dire.

12
00:00:49,120 --> 00:00:53,560
Si je reviens à cela et que je navigue vers les catégories ici, alors vers l'écran

13
00:00:53,590 --> 00:00:59,650
de catégorie qui est l'écran dans lequel je suis déjà. Si je fais cela avec la navigation, ce que vous verrez,

14
00:00:59,800 --> 00:01:02,690
c'est que rien ne se passe si j'appuie dessus.

15
00:01:02,930 --> 00:01:10,760
Maintenant, si j'utilise push à la place et que je passe simplement des catégories comme premier argument parce que c'est ainsi que push fonctionne,

16
00:01:10,760 --> 00:01:16,490
vous verrez que maintenant cela fonctionne et je peux aller sur le même écran encore et encore et

17
00:01:16,490 --> 00:01:19,810
il est poussé sur la même pile et encore.

18
00:01:19,820 --> 00:01:26,030
Maintenant, bien sûr, vous vous demandez peut-être pourquoi je voudrais pousser à nouveau l'écran sur lequel je suis déjà.

19
00:01:26,030 --> 00:01:32,150
Maintenant, dans de nombreuses applications, vous n'en aurez peut-être pas besoin, mais disons que vous créez une application comme Dropbox dans laquelle vous

20
00:01:32,150 --> 00:01:33,370
avez des dossiers entre

21
00:01:33,380 --> 00:01:35,440
lesquels vos utilisateurs peuvent naviguer, si vous

22
00:01:35,570 --> 00:01:38,330
êtes dans un dossier, vous voulez aller dans un autre dossier.

23
00:01:38,330 --> 00:01:44,960
Maintenant, chaque dossier est techniquement le même écran de dossier, juste avec un contenu différent chargé. Dans un tel cas, vous voudrez peut-être passer du dossier A

24
00:01:44,960 --> 00:01:50,720
à B qui utilise le même composant, le même écran à la fin mais avec un contenu différent,

25
00:01:50,720 --> 00:01:56,540
dans un tel cas, vous pouvez utiliser push pour toujours pouvoir pousser ce nouvel écran qui est le

26
00:01:56,540 --> 00:02:02,580
même écran sur la pile et charge le même écran avec un contenu différent, ce serait un scénario où vous

27
00:02:02,600 --> 00:02:05,860
pourriez en avoir besoin. Dans cette application, nous

28
00:02:05,870 --> 00:02:11,720
n'en avons pas besoin, il n'y a donc pas besoin de pousser, mais vous l'avez dans des

29
00:02:11,720 --> 00:02:13,100
scénarios où la

30
00:02:13,100 --> 00:02:15,830
navigation ne vous mènerait pas à cet écran,

31
00:02:15,830 --> 00:02:23,630
la poussée le fera toujours à l'intérieur d'un navigateur de pile. Ici cependant, je reviendrai sur ceci pour naviguer qui prend un objet avec un nom de route qui

32
00:02:23,630 --> 00:02:31,800
pointe ensuite sur les catégories car ici, nous n'avons absolument pas besoin de pousser, c'est-à-dire les repas de catégorie. Donc, cela va faire pour cette application, maintenant vous avez également

33
00:02:31,800 --> 00:02:33,330
d'autres options de

34
00:02:33,330 --> 00:02:36,370
navigation explicites, disons à partir de l'écran de

35
00:02:36,420 --> 00:02:39,600
catégorie de repas, vous voulez pouvoir revenir en arrière.

36
00:02:39,840 --> 00:02:45,330
Bien sûr, nous pouvons revenir en arrière avec l'aide de ce bouton de retour, mais ce n'est pas si

37
00:02:45,360 --> 00:02:51,140
inhabituel que dans certaines applications, vous avez quelque chose que vos utilisateurs peuvent faire là où vous voulez les ramener à

38
00:02:51,150 --> 00:02:55,890
l'époque, par exemple disons vous êtes sur une page où vous pouvez configurer une configuration et

39
00:02:55,890 --> 00:03:01,180
lorsque vous cliquez sur le bouton Enregistrer, vous souhaitez enregistrer cette configuration et vous souhaitez également quitter l'écran.

40
00:03:01,290 --> 00:03:07,410
Maintenant, pour ce scénario, vous voudrez peut-être déclencher une navigation arrière manuellement et n'attendez pas que l'utilisateur appuie sur

41
00:03:07,410 --> 00:03:13,260
le bouton de retour, car cela pourrait forcer l'utilisateur à appuyer d'abord sur un bouton de sauvegarde, puis

42
00:03:13,260 --> 00:03:17,040
à revenir manuellement, ce qui n'est pas la meilleure expérience utilisateur.

43
00:03:17,070 --> 00:03:24,210
Donc ici, je vais en quelque sorte simuler cela en ayant juste un bouton de retour ici dans notre écran, donc dans

44
00:03:24,210 --> 00:03:30,090
notre code jsx et lorsque nous appuyons sur cela, je veux pouvoir revenir en arrière, je veux manuellement

45
00:03:30,090 --> 00:03:31,790
déclencher une navigation arrière.

46
00:03:31,950 --> 00:03:37,740
Vous pouvez le faire avec l'aide de l'accessoire de navigation, car là, vous avez une méthode de retour que vous

47
00:03:37,740 --> 00:03:41,030
pouvez appeler et qui fait exactement ce que cela ressemble.

48
00:03:41,230 --> 00:03:46,380
Si nous sauvegardons cela et je vais aux repas, si je clique sur Retour, nous jouons la navigation arrière.

49
00:03:46,380 --> 00:03:51,960
Techniquement, cela sort de l'écran sur lequel nous sommes et revient donc

50
00:03:51,960 --> 00:03:58,860
à l'écran précédent dans la pile. Comme alternative pour revenir en arrière, si vous êtes dans un navigateur de

51
00:03:58,860 --> 00:04:01,740
pile, vous avez également pop qui fait ce que le

52
00:04:02,010 --> 00:04:08,730
nom implique, il saute de l'écran actuel sur la pile et puisque vous voyez toujours l'écran le plus haut sur votre appareil, cela aussi joue

53
00:04:08,730 --> 00:04:14,240
la navigation arrière, c'est donc une alternative au retour. La différence est que pop ne peut être utilisé que si vous

54
00:04:14,240 --> 00:04:14,980
êtes dans

55
00:04:15,090 --> 00:04:19,770
un navigateur de pile, le retour est également disponible dans d'autres navigateurs que nous utiliserons plus tard dans ce module.

56
00:04:22,340 --> 00:04:27,000
Parfois, vous voudrez également revenir à votre composant

57
00:04:27,140 --> 00:04:34,730
parent, disons ici dans le MealDetailScreen. Là, nous pouvons également ajouter un bouton

58
00:04:34,730 --> 00:04:39,390
et sur ce bouton ici, je veux revenir à mes

59
00:04:39,390 --> 00:04:49,090
catégories disons et donc, je vais ajouter onPress et dans cette fonction ici, je peux utiliser des accessoires de navigation

60
00:04:49,090 --> 00:04:56,860
pop, à droite, car cela nous ramène .

61
00:04:56,860 --> 00:04:59,230
Eh bien, le problème avec cela est bien sûr, cela me ramène, mais seulement à l'écran avant cet écran, donc à l'écran.

62
00:04:59,230 --> 00:05:03,250
Je venais de. Je veux revenir à l'écran des

63
00:05:03,250 --> 00:05:06,040
catégories, donc je veux sauter deux écrans en même temps.

64
00:05:06,250 --> 00:05:08,450
Pour cela, vous avez pop to top, c'est

65
00:05:08,560 --> 00:05:14,260
une autre méthode que vous pouvez appeler qui apparaît simplement de tous les écrans de la pile et vous ramène

66
00:05:14,470 --> 00:05:15,970
à votre écran racine.

67
00:05:16,390 --> 00:05:21,100
Donc, si vous cliquez dessus, nous obtenons l'animation de retour et nous sommes de retour sur notre écran

68
00:05:21,220 --> 00:05:22,720
racine qui dans ce cas

69
00:05:22,720 --> 00:05:27,570
est l'écran de catégorie, c'est donc une alternative ici. Maintenant, avec cela, il n'y a qu'une

70
00:05:27,580 --> 00:05:33,780
dernière action de navigation possible dont vous pourriez parfois avoir besoin. Disons que sur l'écran des catégories, vous voulez aller dans

71
00:05:34,050 --> 00:05:41,880
la catégorie des repas mais vous ne voulez pas l'ajouter à la pile mais vous voulez plutôt remplacer votre composant actuel dans la pile par lui,

72
00:05:41,940 --> 00:05:47,790
de sorte qu'il n'y ait toujours qu'un seul écran dans la pile, mais cet écran est alors une nouvelle page,

73
00:05:47,790 --> 00:05:49,570
cela signifie également que vous

74
00:05:49,620 --> 00:05:54,630
ne pourrez pas revenir sur la nouvelle page car la pile serait vide par la suite, ce

75
00:05:54,630 --> 00:05:56,820
qui signifie que votre application se ferme.

76
00:05:56,820 --> 00:06:00,990
Donc, si vous voulez le faire, vous pouvez utiliser replace. Remplacez également comme push prend

77
00:06:01,020 --> 00:06:09,150
juste un identifiant comme celui-ci et replace vous amène également au nouvel écran, il ne joue pas d'animation vers l'avant cependant, au

78
00:06:09,150 --> 00:06:15,240
lieu de cela il saute instantanément là-bas et vous n'obtenez pas de bouton de retour automatiquement parce

79
00:06:15,240 --> 00:06:19,030
que la pile est vide sinon, c'est la seul écran.

80
00:06:19,200 --> 00:06:24,540
Cela pourrait être utilisé par exemple sur un écran de connexion où un utilisateur s'est connecté et une fois

81
00:06:24,540 --> 00:06:26,990
connecté, l'utilisateur ne devrait pas pouvoir revenir à l'écran

82
00:06:27,030 --> 00:06:32,430
de connexion, eh bien, vous pouvez simplement remplacer l'écran de connexion par votre connexion à l'écran avec le profil

83
00:06:32,430 --> 00:06:34,370
utilisateur ou quelque chose comme ça.

84
00:06:34,620 --> 00:06:39,930
Si vous essayez toujours de revenir en arrière, rien ne se passe parce que vous ne pouvez pas revenir en arrière,

85
00:06:39,930 --> 00:06:44,390
il n'y a rien d'autre dans la pile. Par conséquent, bien sûr, remplacer n'est absolument

86
00:06:44,430 --> 00:06:51,600
pas ce dont nous avons besoin dans cette application, je voulais juste présenter ceci ici, bien que nous verrons plus de modèles disponibles et comment

87
00:06:51,630 --> 00:06:56,810
vous allez et vient entre les pages et quand vous voudrez peut-être remplacer ou basculer entre les

88
00:06:56,830 --> 00:07:02,610
écrans comme ça tout au long de ce module, je voulais juste l'introduire déjà à ce point, toujours là, je

89
00:07:02,910 --> 00:07:10,680
vais revenir naviguer avec le nom de l'itinéraire pointant sur la catégorie repas. Et avec cela, vous avez eu un aperçu de certaines des méthodes de navigation de base

90
00:07:10,800 --> 00:07:16,230
qui vous permettent de faire des allers-retours entre vos écrans. Comme je l'ai mentionné, nous verrons bien sûr

91
00:07:16,230 --> 00:07:22,500
de nombreux modèles en action tout au long de ce module, pour l'instant, c'est tout et je dirais

92
00:07:22,500 --> 00:07:30,180
qu'avec cela, il est temps d'ajouter de la viande à cette application, assurez-vous que c'est un une application plus réaliste et pas seulement

93
00:07:30,330 --> 00:07:33,030
une application factice comme elle l'est actuellement.