Concentrons-nous sur l'écran de détail du repas pour l'instant, donc
la
partie ici où nous voyons les détails de la recette sélectionnée.
En ce moment, nous avons juste le contenu factice là-bas, de l'écran de détail du repas et ce n'est bien sûr pas
le contenu que je veux vraiment y avoir, à
la place ce qui devrait y être?
Eh bien, si nous jetons un coup d'œil à notre modèle de repas, il est probablement logique
d'y avoir l'image, veuillez garder à l'esprit que le titre est déjà affiché dans
notre en-tête, donc il est logique d'avoir l'image ici en haut peut-être et ci-dessous, répétez peut-être la durée, l'abordabilité et la complexité comme nous
le faisons ici ci-dessous notre recette, puis aussi en
dessous, listez tous les ingrédients et les étapes nécessaires pour faire ce plat. C'est donc en fin de compte ce que je veux avoir
sur cette page ici sur le MealDetailScreen et donc, je pense qu'il est logique
d'ajouter d'abord une vue de défilement parce que nous aurons certainement beaucoup de contenu là-bas
qui ne sera probablement pas tenir sur un seul écran et certainement pas sur toutes les tailles d'appareils possibles.
Je vais donc ajouter une vue de défilement ici et envelopper cela autour de mon contenu ici.
Nous allons maintenant avoir quelques sections
différentes ici, par exemple tout en haut, je veux avoir mon image et pour cela, j'importe
également le composant image de React Native ici afin que nous puissions rendre une image
ici, pas une image d'arrière-plan mais une
image normale et je veux ajouter ceci, disons ici tout en haut, quelque chose comme ça.
Maintenant, après l'image, je veux avoir une vue avec la durée, l'abordabilité et la complexité comme je l'ai mentionné, donc essentiellement la
même configuration que nous avons dans le repas, ceci ici, vous pourriez dire et donc je vais en fait copier la vue à partir
de là et ensuite nous pouvons l'ajuster comme nous en avons besoin ici dans le MealDetailScreen, donc je vais
juste remplacer cette vue par la vue de copie.
Bien sûr, cela nous oblige à importer le composant de
texte par
défaut ici, alors ajoutons ceci, importons le texte par défaut à partir
du texte par défaut des composants. C'est donc la ligne suivante et
par la suite, je veux avoir mes ingrédients et les étapes que vous devez exécuter.
Nous pouvons donc ajouter du texte ici où nous disons ingrédients et là, je veux également appliquer un style, comme le texte des styles, le titre, quelque chose comme ça ou simplement le titre
parce que je veux avoir un en-tête
gras ici, peut-être augmenter la taille de la police. En dessous, j'ai ma liste d'ingrédients, donc la liste
d'ingrédients et ce n'est bien sûr pas le contenu final, au lieu de cela, nous allons afficher une
liste ici et en dessous, je vais répéter ici parce que je veux avoir un titre où je dis étapes, puis une liste
d'étapes ci-dessous et maintenant je vais me débarrasser de cet ancien contenu là-bas et c'est ce que je
veux travailler.
Maintenant, bien sûr, tous les styles sont manquants et également la durée des accessoires et ainsi
de suite, cela ne donne rien, à la place nous devons travailler avec le repas sélectionné ici, la
durée du repas sélectionné, la complexité du repas sélectionné, l'abordabilité du repas sélectionné et pour l'image par exemple, je veux ajouter une source ici, source car c'est une image
réseau, est un objet avec une propriété URI qui pointe sur selectedMeal. imageUrl pour charger ceci et nous devons également y
appliquer un style, pour définir une largeur et une hauteur, donc ici
je veux pointer sur les styles image disons et tous ces styles sont manquants
comme je l'ai dit alors ajoutons cela. Ici pour ce style, je veux aussi dire les styles. détails peut-être parce que nous affichons les
détails de cette recette et descendons donc à la feuille de style, supprimons l'écran dont
nous
n'avons plus besoin, au lieu ajoutons image et détails. Maintenant, pour plus de détails, nous devons définir la direction du flex sur row car
cela devrait être tous les détails d'une ligne.
Nous pouvons ajouter un peu de rembourrage dans toutes les directions, peut-être de 15 et également ajouter un
contenu d'espace justifié pour bien répartir nos éléments de détail ici, cela devrait être bien.
En plus de cela, sur l'image ici, nous devons également ajouter un style, là, la largeur devrait être de
100% disons, pour prendre toute la largeur disponible et pour la hauteur, j'irai avec
200, bien que
vous puissiez bien sûr calculer dynamiquement cela avec l'API dimensions par exemple pour
toujours prendre une certaine fraction de la hauteur disponible ou simplement jouer avec différentes valeurs ici.
J'irai avec ça et jetterai un œil ici et ça n'a
pas l'air trop minable, c'est
pas trop mal.
Maintenant, vous pouvez certainement essayer du travail bonus ici, des tâches bonus et par exemple colorer ces
détails - simple, abordable et la durée selon qu'elle est plutôt courte ou en fonction des
différentes valeurs que vous avez pour simple, pour la complexité et l'abordabilité .
Ce n'est pas quelque chose que je ferai ici, mais vous pouvez bien sûr consulter les données sur les repas pour voir
quelles valeurs nous avons là pour dériver ce qui est court, ce qui est une durée moyenne ce qui est une longue durée et pour
voir quelles valeurs sont utilisées pour la complexité et ainsi de suite, puis vous pouvez ajouter des vérifications pour
appliquer un style différent aux différentes valeurs que nous générons ici dans l'écran de détail des repas pour ces détails afin que vous coloriez
le texte différemment selon qu'il est long ou non. Ce n'est pas quelque chose que je ferai
ici parce que c'est juste un travail supplémentaire qui n'ajoute pas vraiment beaucoup à la navigation qui est au
centre de ce module.
Au lieu de cela, je vais me concentrer sur les ingrédients et les étapes et là, une première étape consiste à s'assurer que le titre
ici est correctement stylisé.
Donc, ajoutons un titre à la feuille de style et là, je vais ajouter une famille de polices et définir ceci
pour ouvrir sans gras, définir la taille de police à 22 peut-être et définir l'alignement du texte au centre pour centrer le
texte au milieu et avec cela si nous vérifions cela, cela semble assez agréable.
Maintenant, je veux aussi sortir mes ingrédients dans mes étapes bien sûr et pour cela, il est important de comprendre
que dans les données factices, ce sont des tableaux, ce sont mes
ingrédients par exemple, ce sont mes
étapes et vous voyez qu'il n'y a que du texte dans ces tableaux. Donc, je veux juste sortir mon texte ici sous forme
de liste et je n'utiliserai pas de FlatList parce que vous pourriez le faire, vous pourriez avoir des conteneurs défilables pour
ainsi dire, mais je vais simplement rendre les ingrédients et les étapes au-dessus de chacun autre.
Donc, ici, nous pouvons utiliser une bonne vieille approche que nous connaissons de Vanilla React ou React for web à
laquelle j'ai également montré plus tôt dans le cours. Nous pouvons utiliser notre repas sélectionné et là, les ingrédients qui
sont un tableau de chaînes et le mapper dans un tableau de
composants, c'est ainsi que vous pouvez générer une liste de données dans React et aussi React Native et souvent, vous
utilisez FlatList mais ici nous ce n'est pas nécessaire, car ce n'est pas une quantité infinie,
nous n'avons donc pas besoin de ces optimisations et nous avons une vue de défilement enveloppant sur tout l'écran afin
que nous puissions également faire défiler si nous sortons plus que ce qui convient à l'écran, nous
sommes donc très bien en utilisant cette
approche et donc ici, je vais avoir mon ingrédient unique dans cette fonction de carte et la carte est
une méthode intégrée à JavaScript
comme vous le savez et ici nous devons retourner un élément
jsx maintenant et ce que je veux retourner est un composant texte où je produis simplement l'ingrédient parce que les
ingrédients sont un
tableau de chaînes, donc l'ingrédient n'est qu'une
chaîne et ici nous devons également fournir une clé, c'est une exigence de React et
nous pouvons utiliser l'ingrédient comme clé parce que nous allons avoir toujours chaque ingrédient une seule fois.
Donc, c'est garanti d'être unique, c'est comme
ça que nos repas sont préparés et avec ça
si on garde ça et qu'on regarde une recette ici, on voit nos ingrédients. Maintenant, pour le style, nous pouvons certainement faire quelque
chose là-bas et je
le ferai dans une seconde, mais avant de le faire, permettez-moi de répéter cela
pour les étapes ici, remplacez ce texte par selectedMeal. étapes et ensuite sortir chaque étape ici qui est aussi juste une
chaîne et qui est également unique dans un texte et avec cela ajouté, nous devrions également voir les étapes de notre repas, en effet nous le faisons.
Maintenant, le style peut être amélioré un peu et nous ferons exactement cela et je pense
qu'il est logique de créer un composant séparé ou une fonction de rendu pour cela et je vais créer un composant séparé, nous le
stockerons dans le même fichier mais parce que nous ne l'utilisons vraiment que dans ce fichier, mais vous pouvez également
créer
un nouveau fichier, à vous de décider. Là, je vais avoir mon
élément de liste qui reçoit les accessoires où je reviens et maintenant ici, je veux utiliser une vue que
j'importe en tant que wrapper afin de pouvoir styliser ce conteneur et là-dedans, avoir
mon texte où je produis les accessoires enfants et maintenant cette vue obtiendra un style à
partir des styles. ListItem peut-être pour que nous puissions styliser
cela bien et ici, bien sûr, je ne veux pas utiliser de texte mais en fait du texte
par défaut, ici
aussi bien sûr pour que nous profitions de notre propre texte personnalisé.
Maintenant, pour le style d'élément de liste ici, descendons vers la feuille de style et ajoutons un élément de liste et chaque élément
de liste devrait avoir une marge, une marge verticale de disons 10 et une marge horizontale de disons 20, donc
plus d'espacement à gauche et à droite et ajoutons peut-être aussi une couleur de bordure d'une couleur grisâtre clair avec #ccc et une largeur de
bordure de 1, nous verrons à quoi cela ressemble
et ensuite ajouter un peu de rembourrage là-dedans, 10 dans toutes les directions et nous vais voir à
quoi ça ressemble.
Maintenant, nous devons juste nous assurer que nous utilisons notre composant d'élément de liste et nous l'utilisons en renvoyant qu'au lieu de texte ici lors
de la sortie des ingrédients, nous passons toujours l'ingrédient entre les balises d'ouverture et de fermeture de
notre propre composant personnalisé parce que là, nous sommes en utilisant des accessoires pour enfants qui utilisent le contenu que nous
passons entre les balises d'ouverture et de fermeture et
nous faisons de même pour nos étapes. Avec cela, jetons
un coup d'œil à
cela, oui ne semble pas trop mal. Nous obtenons nos étapes ici, avons nos ingrédients, bien sûr, vous pouvez affiner ce style,
affiner vos besoins, la façon dont vous voulez qu'il apparaisse, mais je suis en fait assez content de cela et avec cela, nous avons obtenu
un détail de base écran et bien sûr, cet écran de détail fonctionne également pour nos favoris parce que
nous utilisons un seul et même écran là-bas.
Donc ça a l'air plutôt sympa, l'écran du filtre est ce qui manque maintenant.