1
00:00:02,250 --> 00:00:07,650
Nous extrayons notre catégorie ici dans notre composant, car nous y obtenons notre paramètre à

2
00:00:07,650 --> 00:00:09,130
l'aide d'accessoires de navigation.

3
00:00:09,150 --> 00:00:12,980
Maintenant, en fait, je veux afficher le titre dans mon en-tête.

4
00:00:13,050 --> 00:00:18,520
Maintenant, vous avez appris comment configurer cet en-tête à l'aide des options de navigation, donc sur le

5
00:00:18,630 --> 00:00:25,170
composant d'écran de catégorie repas et donc, c'est une fonction donc, c'est un objet, nous pouvons ajouter des options de

6
00:00:25,530 --> 00:00:30,300
navigation et vous avez appris que c'est un L'objet Javascript où vous pouvez

7
00:00:30,300 --> 00:00:35,670
configurer un titre d'en-tête et un titre d'en-tête maintenant devrait être le nom de ma catégorie.

8
00:00:35,700 --> 00:00:43,910
Le problème ici est qu'ici, la catégorie sélectionnée est disponible mais se trouve à l'intérieur de la fonction du composant.

9
00:00:43,910 --> 00:00:49,670
Bien sûr, d'un autre côté, nous ne pouvons pas y accéder car cela se produit après la définition

10
00:00:49,670 --> 00:00:50,990
de la fonction.

11
00:00:51,350 --> 00:00:55,150
Nous n'avons donc pas accès à la catégorie que nous y avons

12
00:00:55,220 --> 00:00:56,920
identifiée, c'est un problème.

13
00:00:56,930 --> 00:01:04,390
La bonne chose est que les options de navigation peuvent être un objet si vous avez des valeurs de configuration codées en dur mais

14
00:01:05,000 --> 00:01:11,990
cela peut aussi être une fonction si vous avez besoin d'une configuration dynamique qui dépend de la modification des données et bien sûr

15
00:01:12,020 --> 00:01:17,300
les données dont nous dépendons ici changent parce que nous '' ré utiliser un seul et

16
00:01:17,300 --> 00:01:22,820
même écran pour différentes catégories et par conséquent, l'ID et le titre de la catégorie changent chaque fois

17
00:01:22,820 --> 00:01:26,140
que nous utilisons cet écran. Une fois, nous l'utilisons pour

18
00:01:26,140 --> 00:01:32,360
la catégorie italienne, la prochaine fois nous l'utilisons pour la catégorie exotique. Cette fonction que vous pouvez également utiliser, elle est

19
00:01:32,360 --> 00:01:34,700
bien sûr prise en charge par

20
00:01:34,700 --> 00:01:40,220
React navigation et si c'est une fonction, ce que vous passez aux options de navigation,

21
00:01:40,220 --> 00:01:48,740
React navigation l'appellera pour vous et transmettra certaines données de navigation, donc il passez un objet avec des données qui devraient vous aider, nous

22
00:01:48,740 --> 00:01:54,800
allons voir ce qu'il y a dans une seconde car nous pouvons simplement enregistrer ces données de

23
00:01:54,800 --> 00:01:55,850
navigation ici.

24
00:01:55,970 --> 00:01:57,610
Commençons par ça, allons

25
00:01:57,710 --> 00:02:01,210
maintenant sur cette page et voyons ce qu'il y a dedans.

26
00:02:01,310 --> 00:02:05,850
Si je développe ceci ici, c'est le journal que j'ai reçu et vous voyez

27
00:02:05,850 --> 00:02:14,570
que nous avons un autre accessoire de navigation dans les données de navigation. Là, nous avons des actions, nous avons naviguer pop, push,

28
00:02:14,580 --> 00:02:15,390
donc

29
00:02:15,390 --> 00:02:20,010
en gros ce que nous savions. Nous avons également getParam

30
00:02:20,010 --> 00:02:28,050
et cela devrait être utile car cela nous permettra d'extraire des données ici à l'intérieur de nos options de

31
00:02:28,110 --> 00:02:36,880
navigation à la fin, ce qui devrait être super utile. Donc, à la fin, nous obtenons le même accessoire de navigation que nous obtenons également sur nos accessoires de composants.

32
00:02:37,040 --> 00:02:48,110
Donc ici, nous pouvons maintenant utiliser navigationData. la navigation. getParam pour obtenir mon ID de catégorie, exactement ce

33
00:02:48,110 --> 00:02:54,660
que nous avons fait dans le composant. Nous pouvons donc répéter le code que nous avions dans un

34
00:02:54,660 --> 00:03:02,020
composant et obtenir la catégorie sélectionnée, non seulement dans le composant, mais aussi dans cette fonction que nous utilisons pour configurer nos options de navigation.

35
00:03:02,040 --> 00:03:08,130
Alors maintenant, ici, nous avons également accès à la catégorie sélectionnée et maintenant, les options de navigation, cette fonction,

36
00:03:08,220 --> 00:03:13,460
si c'est une fonction, devrait bien sûr renvoyer un objet avec vos options de navigation.

37
00:03:13,470 --> 00:03:19,860
Donc, ce que nous avons précédemment défini directement comme options de navigation alors que nous n'avions que des valeurs codées

38
00:03:19,860 --> 00:03:20,550
en dur

39
00:03:20,610 --> 00:03:26,950
doit maintenant être retourné, mais nous pouvons maintenant utiliser ces données dérivées dynamiquement ou les informations dérivées dynamiquement ici.

40
00:03:26,970 --> 00:03:33,600
Alors maintenant, nous pouvons toujours configurer un titre d'en-tête ici et le titre d'en-tête peut maintenant

41
00:03:33,720 --> 00:03:35,450
être sélectionnéCatégorie. Titre.

42
00:03:35,510 --> 00:03:41,300
C'est ainsi que nous pouvons dériver dynamiquement cela et donc maintenant si vous revenez en arrière,

43
00:03:41,300 --> 00:03:47,420
vous voyez l'italien ici, vous voyez rapide et facile ici, vous voyez l'allemand ici et cela fonctionne.

44
00:03:47,420 --> 00:03:55,280
Veuillez noter que vous obtenez également par défaut un texte de bouton de retour qui est le titre des écrans précédents, c'est une autre fonctionnalité

45
00:03:55,280 --> 00:04:01,130
par défaut que la navigation React vous offre. Nous revenons aux catégories de repas ici parce que

46
00:04:01,130 --> 00:04:05,720
nous venons de catégories de repas. Seulement sur rapide et facile où cela

47
00:04:05,720 --> 00:04:13,010
serait trop long à côté de ce titre un peu plus long, il revient et revient par défaut, ce qui est un bon comportement par

48
00:04:13,010 --> 00:04:19,400
défaut que vous pouvez remplacer mais dont je suis satisfait ici. Sur Android, nous n'avons pas de texte en arrière, mais

49
00:04:19,400 --> 00:04:25,340
bien sûr, nous avons un bouton de retour et là, l'en-tête est également correctement rempli pour les écrans qui sont chargés.

50
00:04:26,240 --> 00:04:32,030
Voilà comment nous pouvons également obtenir nos données de manière dynamique ici dans les options de navigation. Un problème que vous remarquerez peut-être, mais qui est le

51
00:04:32,030 --> 00:04:37,430
plus visible ici sur Android, est que l'en-tête du nouvel écran que nous chargeons n'a pas le même style

52
00:04:37,700 --> 00:04:44,450
que notre en-tête ici, il n'a pas la couleur d'arrière-plan, à savoir. Maintenant, bien sûr, cela est facilement corrigé car sur les

53
00:04:44,480 --> 00:04:51,620
options de navigation de la catégorie repas, nous pouvons simplement ajouter le style d'en-tête et la couleur de teinte d'en-tête que

54
00:04:51,620 --> 00:04:58,250
nous avons configurés ici sur l'autre écran également. Nous pouvons donc copier cela ici et

55
00:04:58,250 --> 00:05:06,200
cela signifie simplement que nous devons importer l'API de la plate-forme et bien sûr, notre couleur constante, alors importez des couleurs

56
00:05:06,550 --> 00:05:18,730
à partir de constantes / Couleurs comme ceci et quand nous le ferons, nous verrons que si nous y allons , nous avons maintenant le même style d'en-tête pour cette nouvelle page

57
00:05:18,730 --> 00:05:25,570
qui est bien sûr ce que vous voulez généralement. Ce que vous ne voulez généralement pas, c'est que

58
00:05:25,600 --> 00:05:31,300
vous devez copier la même configuration sur chaque écran, car dans cette application, nous n'avons pas autant

59
00:05:31,300 --> 00:05:36,070
d'écrans, nous pouvons certainement le faire, mais dans les applications plus grandes où vous

60
00:05:36,070 --> 00:05:42,520
avez plus d'écrans, cela serait super ennuyeux et super encombrant, donc ce n'est certainement pas la façon d'y aller.

61
00:05:42,520 --> 00:05:44,740
Jetons donc un œil à une alternative dans la prochaine conférence.