1
00:00:02,350 --> 00:00:07,000
Sur l'écran des catégories, nous voulons nous assurer que notre article peut y être

2
00:00:07,020 --> 00:00:13,590
touché, donc j'importerai touchable et j'importerai l'opacité touchable ici pour avoir un léger effet d'opacité mais bien sûr c'est

3
00:00:13,740 --> 00:00:15,000
à vous de

4
00:00:15,090 --> 00:00:17,100
choisir le motif ou le composant

5
00:00:17,100 --> 00:00:23,730
que vous utilisez là, devrait être un composant tactile à travers lequel vous enroulez votre élément ici et maintenant sur

6
00:00:23,730 --> 00:00:24,750
l'opacité tactile,

7
00:00:24,750 --> 00:00:30,060
je vais ajouter onPress afin que nous puissions faire quelque chose lorsque vous appuyez dessus.

8
00:00:30,060 --> 00:00:31,400
Que voulons-nous faire?

9
00:00:31,440 --> 00:00:38,760
Nous voulons aller à l'écran des repas de catégorie qui est une sorte de page de détail pour une catégorie choisie pour montrer toutes les recettes

10
00:00:38,760 --> 00:00:40,830
pour cette catégorie, nous n'avons pas encore

11
00:00:40,830 --> 00:00:43,910
de recettes mais je veux toujours aller à la page déjà.

12
00:00:44,610 --> 00:00:50,100
Donc donc ici, nous devons déclencher une action de navigation et auparavant, nous l'avons fait avec la navigation

13
00:00:50,280 --> 00:00:51,470
par accessoires, non?

14
00:00:51,480 --> 00:00:56,550
Le problème est que nous n'avons pas d'accessoires disponibles ici parce que nous sommes à l'intérieur de la fonction d'élément de

15
00:00:56,670 --> 00:00:59,090
grille de rendu qui est en dehors de notre composant.

16
00:00:59,130 --> 00:01:04,610
Maintenant, nous pouvons simplement déplacer cela à l'intérieur de notre composant pour résoudre ce problème.

17
00:01:04,770 --> 00:01:10,470
Si nous créons cette fonction là-dedans, alors nous avons accès aux accessoires parce que nous sommes maintenant à l'intérieur de

18
00:01:10,470 --> 00:01:17,070
notre fonction de composant et maintenant nous pourrons appeler naviguer ici. Nous pouvons appeler naviguer et je veux aller à un nom

19
00:01:17,070 --> 00:01:23,310
d'itinéraire et bien sûr le nom de l'itinéraire que je veux aller peut être trouvé dans notre navigateur est la catégorie des

20
00:01:23,310 --> 00:01:27,510
repas à droite, parce que nous voulons charger tous les repas pour la catégorie choisie.

21
00:01:27,510 --> 00:01:33,660
Nous allons donc dans la catégorie repas ici et si nous ajoutons ceci et nous enregistrons cela, nous voyons maintenant que notre

22
00:01:33,660 --> 00:01:37,560
style est un peu cassé, je vais le réparer dans une seconde mais la

23
00:01:37,560 --> 00:01:44,520
navigation fonctionne, nous avons également cet effet d'opacité, donc ça marche . Maintenant, la fixation du style est facile, nous venons de le perdre

24
00:01:44,520 --> 00:01:47,080
parce que j'ai enveloppé l'opacité tactile autour de

25
00:01:47,220 --> 00:01:53,760
ma vue, nous avons juste besoin d'ajouter ce style ici qui ajoute la marge autour de notre article et ainsi de suite à l'opacité

26
00:01:53,760 --> 00:02:00,230
tactile au lieu de cette vue ici et avec ça, nous avons retrouvé ce style et cela fonctionne maintenant comme il se doit.

27
00:02:00,270 --> 00:02:06,630
La question la plus intéressante est, comment pouvons-nous réellement définir notre titre d'en-tête? Maintenant, pour cela, nous avons quelques options,

28
00:02:06,630 --> 00:02:07,720
jetons un

29
00:02:07,800 --> 00:02:13,740
coup d'œil à l'option numéro un. Sur chaque composant React que vous allez charger

30
00:02:13,740 --> 00:02:22,420
en tant qu'écran, ce qui signifie ce que vous mappez à un tel nom d'écran, par exemple dans le navigateur de pile, vous pouvez ajouter une propriété.

31
00:02:22,410 --> 00:02:28,590
Maintenant, gardez à l'esprit que l'écran des catégories est bien sûr un composant React mais techniquement, c'est une fonction

32
00:02:28,590 --> 00:02:29,370
Javascript, non?

33
00:02:29,370 --> 00:02:34,290
C'est une fonction qui reçoit l'argument props puis exécute ce corps qui retourne du jsx

34
00:02:34,290 --> 00:02:37,390
et donc React est capable de l'utiliser comme composant

35
00:02:37,530 --> 00:02:39,840
mais techniquement, c'est une fonction Javascript.

36
00:02:39,840 --> 00:02:43,490
Maintenant, les fonctions Javascript ne sont que des objets, c'est

37
00:02:43,500 --> 00:02:44,720
Javascript, les fonctions

38
00:02:44,790 --> 00:02:52,800
sont des objets et sur les objets, nous pouvons ajouter des propriétés. L'écran des catégories n'est donc qu'un objet Javascript, nous

39
00:02:52,890 --> 00:02:53,630
pouvons

40
00:02:53,730 --> 00:02:57,150
donc ajouter une propriété après l'avoir créée.

41
00:02:57,150 --> 00:03:07,040
Donc ici, après avoir défini notre fonction d'écran de catégories et donc cet objet, nous pouvons y accéder et nous pouvons ajouter une propriété

42
00:03:07,040 --> 00:03:13,250
avec la notation par points, c'est ainsi que Javascript fonctionne, vous pouvez simplement ajouter une

43
00:03:13,250 --> 00:03:14,250
telle propriété.

44
00:03:14,260 --> 00:03:20,870
Vous pouvez maintenant ajouter ici une propriété spéciale à laquelle ressemblera la navigation React et c'est la propriété

45
00:03:21,350 --> 00:03:22,970
des options de navigation.

46
00:03:22,970 --> 00:03:26,270
Vous n'êtes pas obligé de l'ajouter et ce ne sera pas un problème si

47
00:03:26,270 --> 00:03:32,000
vous ne le faites pas, nous ne l'avons pas fait jusqu'à présent mais vous pouvez l'ajouter, si vous l'ajoutez, il sera respecté par React la navigation.

48
00:03:33,210 --> 00:03:38,480
Il y a maintenant un tas d'options que vous pouvez configurer là-bas et une liste complète peut bien sûr être

49
00:03:38,480 --> 00:03:40,120
trouvée dans les documents officiels.

50
00:03:40,270 --> 00:03:45,100
Dans la forme la plus simple, vous affectez simplement un objet Javascript ici avec

51
00:03:45,100 --> 00:03:51,880
ce tas d'options que vous pouvez maintenant configurer dans cet objet et l'option qui m'intéresse ici est le titre

52
00:03:52,030 --> 00:04:00,440
de l'en-tête, qui peut simplement être défini sur un texte, par exemple catégories de repas, car nous sommes sur l'écran des catégories, ce serait

53
00:04:00,430 --> 00:04:03,970
donc un titre approprié. Si nous enregistrons cela,

54
00:04:03,970 --> 00:04:09,090
vous voyez maintenant les catégories de repas comme un titre ici dans l'en-tête.

55
00:04:09,120 --> 00:04:14,970
Maintenant, vous pouvez également styliser l'en-tête ici à l'aide de la propriété de style d'en-tête, cela prend un objet

56
00:04:14,970 --> 00:04:21,200
de style où vous pouvez généralement configurer ce que vous pouvez configurer en tant que styles sur les vues également et

57
00:04:21,310 --> 00:04:27,090
là, vous pouvez ajouter une couleur d'arrière-plan qui est le style le plus courant que vous appliquez généralement.

58
00:04:27,210 --> 00:04:32,610
Maintenant, je veux configurer une couleur ici et j'utiliserai une approche que j'ai déjà utilisée plus

59
00:04:32,670 --> 00:04:43,350
tôt dans le cours, j'ajouterai un dossier de constantes et là-bas, j'ajouterai des couleurs. Fichier js dans lequel je vais ensuite exporter un objet Javascript où toutes les

60
00:04:43,440 --> 00:04:48,470
couleurs que je veux utiliser encore et encore dans l'application sont configurées.

61
00:04:48,600 --> 00:04:56,790
Là, je vais configurer une couleur primaire pour laquelle j'ai présélectionné un code hexadécimal de # 4a148C mais bien sûr, vous pouvez expérimenter avec différentes couleurs

62
00:04:56,790 --> 00:05:03,060
si vous le souhaitez et je vais définir une couleur d'accentuation ou une couleur secondaire dont le code hexadécimal est

63
00:05:03,270 --> 00:05:07,920
# ff6f00 et ce ne sont que les couleurs que j'ai choisies, comme je l'ai

64
00:05:07,920 --> 00:05:13,850
mentionné, vous pouvez bien sûr en utiliser différentes. De retour dans l'écran des catégories, je veux

65
00:05:13,860 --> 00:05:21,030
maintenant utiliser des couleurs et pour cela, vous devez l'importer, importer des couleurs avec un C majuscule, ce qui

66
00:05:21,030 --> 00:05:29,730
est juste une convention que j'utilise pour indiquer qu'il s'agit d'une constante, à partir de constantes / Couleurs , également nommé avec un C

67
00:05:29,730 --> 00:05:38,420
majuscule, puis ici nous utilisons des couleurs. primaryColor par exemple. Si vous faites cela, vous verrez que votre en-tête a

68
00:05:38,420 --> 00:05:43,730
maintenant cette couleur violet foncé que j'ai choisie. Cela rend le titre un peu difficile à lire,

69
00:05:44,030 --> 00:05:48,670
mais heureusement, vous pouvez également le styler, pas avec le style d'en-tête, car ce n'est que la

70
00:05:48,720 --> 00:05:56,300
boîte de l'en-tête pour ainsi dire, pas son contenu, mais le titre peut être stylisé avec la couleur de la teinte de l'en-tête et encore une fois, les

71
00:05:56,450 --> 00:06:01,090
documents officiels sont l'endroit où vous pouvez tout savoir sur ces options disponibles, c'est comme ça que

72
00:06:01,100 --> 00:06:02,380
je les connais, c'est

73
00:06:02,390 --> 00:06:04,470
là que vous lirez à leur sujet.

74
00:06:04,550 --> 00:06:10,820
Maintenant, la couleur de la teinte de l'en-tête peut toujours être une couleur, par exemple du blanc ici simplement qui correspond

75
00:06:10,820 --> 00:06:19,120
à ma couleur par défaut et maintenant vous voyez que c'est du blanc. Bien sûr, vous voudrez peut-être également un look différent pour Android et iOS, vous

76
00:06:19,120 --> 00:06:23,690
voudrez peut-être regarder où cela ressemble plus à iOS, ce qui signifie que vous n'avez

77
00:06:23,740 --> 00:06:29,560
pas d'arrière-plan coloré, mais juste un texte est coloré et vous pouvez y parvenir avec le bon ancienne plate-forme API

78
00:06:29,560 --> 00:06:35,980
dont vous avez entendu parler plus tôt dans le cours. Nous pouvons utiliser l'API de la plateforme pour

79
00:06:35,980 --> 00:06:42,490
changer dynamiquement les couleurs que nous utilisons ici en fonction de la plateforme sur laquelle notre application fonctionne.

80
00:06:42,490 --> 00:06:47,630
Donc ici pour la couleur de fond, on peut utiliser la plateforme. os et voir si c'est Android, auquel

81
00:06:47,640 --> 00:06:53,850
cas je veux utiliser la couleur primaire, sinon dans cette expression ternaire, je n'utiliserai pas de couleur, donc

82
00:06:53,920 --> 00:07:00,940
nous pouvons utiliser du blanc ici par exemple, un fond blanc normal ou simplement configurer aucune couleur du tout comme ça

83
00:07:00,940 --> 00:07:07,150
et vous obtiendrez alors la couleur d'arrière-plan par défaut. Et pour la couleur de la teinte, c'est la

84
00:07:07,150 --> 00:07:10,810
même chose, je vérifie si le système d'exploitation est Android dans

85
00:07:10,810 --> 00:07:20,360
lequel la couleur du texte doit être blanche, sinon je vais la régler sur Couleurs. primaryColour et avec cela, vous avez maintenant plus d'iOS, plus de look

86
00:07:20,360 --> 00:07:27,530
typique d'iOS ici sur iOS et vous avez le look Android par défaut qui est plus coloré sur Android.

87
00:07:27,530 --> 00:07:31,100
Voilà comment vous pouvez configurer les options de

88
00:07:31,130 --> 00:07:39,170
navigation ici, maintenant qu'en est-il de cet écran cependant, où nous allons à nos détails ici, aux repas

89
00:07:39,170 --> 00:07:45,500
italiens ou aux repas rapides et faciles? Ce serait bien si nous pouvions voir rapidement et facilement ici ou l'italien ici dans

90
00:07:45,500 --> 00:07:46,400
l'en-tête dans ce cas.

91
00:07:46,400 --> 00:07:51,230
C'est donc la prochaine chose que nous devons prendre en charge et pour cela, nous devons transmettre

92
00:07:51,230 --> 00:07:55,940
certaines informations de cet écran à cet écran. Nous allons donc voir comment cela fonctionne dans la prochaine vidéo.