Sur l'écran des catégories, nous voulons nous assurer que notre article peut y être
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
à vous de
choisir le motif ou le composant
que vous utilisez là, devrait être un composant tactile à travers lequel vous enroulez votre élément ici et maintenant sur
l'opacité tactile,
je vais ajouter onPress afin que nous puissions faire quelque chose lorsque vous appuyez dessus.
Que voulons-nous faire?
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
pour cette catégorie, nous n'avons pas encore
de recettes mais je veux toujours aller à la page déjà.
Donc donc ici, nous devons déclencher une action de navigation et auparavant, nous l'avons fait avec la navigation
par accessoires, non?
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
grille de rendu qui est en dehors de notre composant.
Maintenant, nous pouvons simplement déplacer cela à l'intérieur de notre composant pour résoudre ce problème.
Si nous créons cette fonction là-dedans, alors nous avons accès aux accessoires parce que nous sommes maintenant à l'intérieur de
notre fonction de composant et maintenant nous pourrons appeler naviguer ici. Nous pouvons appeler naviguer et je veux aller à un nom
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
repas à droite, parce que nous voulons charger tous les repas pour la catégorie choisie.
Nous allons donc dans la catégorie repas ici et si nous ajoutons ceci et nous enregistrons cela, nous voyons maintenant que notre
style est un peu cassé, je vais le réparer dans une seconde mais la
navigation fonctionne, nous avons également cet effet d'opacité, donc ça marche . Maintenant, la fixation du style est facile, nous venons de le perdre
parce que j'ai enveloppé l'opacité tactile autour de
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é
tactile au lieu de cette vue ici et avec ça, nous avons retrouvé ce style et cela fonctionne maintenant comme il se doit.
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,
jetons un
coup d'œil à l'option numéro un. Sur chaque composant React que vous allez charger
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é.
Maintenant, gardez à l'esprit que l'écran des catégories est bien sûr un composant React mais techniquement, c'est une fonction
Javascript, non?
C'est une fonction qui reçoit l'argument props puis exécute ce corps qui retourne du jsx
et donc React est capable de l'utiliser comme composant
mais techniquement, c'est une fonction Javascript.
Maintenant, les fonctions Javascript ne sont que des objets, c'est
Javascript, les fonctions
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
pouvons
donc ajouter une propriété après l'avoir créée.
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é
avec la notation par points, c'est ainsi que Javascript fonctionne, vous pouvez simplement ajouter une
telle propriété.
Vous pouvez maintenant ajouter ici une propriété spéciale à laquelle ressemblera la navigation React et c'est la propriété
des options de navigation.
Vous n'êtes pas obligé de l'ajouter et ce ne sera pas un problème si
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.
Il y a maintenant un tas d'options que vous pouvez configurer là-bas et une liste complète peut bien sûr être
trouvée dans les documents officiels.
Dans la forme la plus simple, vous affectez simplement un objet Javascript ici avec
ce tas d'options que vous pouvez maintenant configurer dans cet objet et l'option qui m'intéresse ici est le titre
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
donc un titre approprié. Si nous enregistrons cela,
vous voyez maintenant les catégories de repas comme un titre ici dans l'en-tête.
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
de style où vous pouvez généralement configurer ce que vous pouvez configurer en tant que styles sur les vues également et
là, vous pouvez ajouter une couleur d'arrière-plan qui est le style le plus courant que vous appliquez généralement.
Maintenant, je veux configurer une couleur ici et j'utiliserai une approche que j'ai déjà utilisée plus
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
couleurs que je veux utiliser encore et encore dans l'application sont configurées.
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
si vous le souhaitez et je vais définir une couleur d'accentuation ou une couleur secondaire dont le code hexadécimal est
# ff6f00 et ce ne sont que les couleurs que j'ai choisies, comme je l'ai
mentionné, vous pouvez bien sûr en utiliser différentes. De retour dans l'écran des catégories, je veux
maintenant utiliser des couleurs et pour cela, vous devez l'importer, importer des couleurs avec un C majuscule, ce qui
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
majuscule, puis ici nous utilisons des couleurs. primaryColor par exemple. Si vous faites cela, vous verrez que votre en-tête a
maintenant cette couleur violet foncé que j'ai choisie. Cela rend le titre un peu difficile à lire,
mais heureusement, vous pouvez également le styler, pas avec le style d'en-tête, car ce n'est que la
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
documents officiels sont l'endroit où vous pouvez tout savoir sur ces options disponibles, c'est comme ça que
je les connais, c'est
là que vous lirez à leur sujet.
Maintenant, la couleur de la teinte de l'en-tête peut toujours être une couleur, par exemple du blanc ici simplement qui correspond
à 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
voudrez peut-être regarder où cela ressemble plus à iOS, ce qui signifie que vous n'avez
pas d'arrière-plan coloré, mais juste un texte est coloré et vous pouvez y parvenir avec le bon ancienne plate-forme API
dont vous avez entendu parler plus tôt dans le cours. Nous pouvons utiliser l'API de la plateforme pour
changer dynamiquement les couleurs que nous utilisons ici en fonction de la plateforme sur laquelle notre application fonctionne.
Donc ici pour la couleur de fond, on peut utiliser la plateforme. os et voir si c'est Android, auquel
cas je veux utiliser la couleur primaire, sinon dans cette expression ternaire, je n'utiliserai pas de couleur, donc
nous pouvons utiliser du blanc ici par exemple, un fond blanc normal ou simplement configurer aucune couleur du tout comme ça
et vous obtiendrez alors la couleur d'arrière-plan par défaut. Et pour la couleur de la teinte, c'est la
même chose, je vérifie si le système d'exploitation est Android dans
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
typique d'iOS ici sur iOS et vous avez le look Android par défaut qui est plus coloré sur Android.
Voilà comment vous pouvez configurer les options de
navigation ici, maintenant qu'en est-il de cet écran cependant, où nous allons à nos détails ici, aux repas
italiens ou aux repas rapides et faciles? Ce serait bien si nous pouvions voir rapidement et facilement ici ou l'italien ici dans
l'en-tête dans ce cas.
C'est donc la prochaine chose que nous devons prendre en charge et pour cela, nous devons transmettre
certaines informations de cet écran à cet écran. Nous allons donc voir comment cela fonctionne dans la prochaine vidéo.