Pour styliser les éléments séparés, je vais à nouveau créer un composant distinct et
je vais le nommer repasitem. js, le nom vous
appartient toujours et là-dedans, vous connaissez le jeu, nous
créons un composant React en important React,
nous aurons probablement aussi besoin de la vue, du texte et de la feuille de style
et peut-être aussi d'autres choses de React Native. Ensuite, nous configurons le composant, l'élément de repas, où nous recevons des accessoires et
où nous retournons ensuite du jsx à la fin. Configurez une feuille de style ici, stockez-la dans une constante de styles avec la feuille de
style créée à laquelle nous passons un objet et à la fin, nous exportons notre élément de repas ici en tant que fichier par défaut. Maintenant, avec cela ici, dans l'élément de repas, dans ce composant, nous
devons bien sûr retourner du
code jsx pour cet élément de repas et c'est quelque chose que j'obtiens de l'écran de catégorie
de repas. Là, j'ai cette
vue avec mon texte ici, c'est à la fin ce que je veux sortir, un peu plus complexe que cela, mais je vais le couper à
partir de là et le déplacer vers l'élément de repas et là, retourner cette vue ici mais
de bien sûr, nous n'en avons pas fini avec cela. D'une part, cela devrait également être palpable,
car nous pouvons sélectionner un repas, nous pouvons sélectionner une telle recette à prendre
à l'écran de détail, donc je vais importer l'opacité palpable.
Maintenant, bien sûr, vous pouvez à nouveau faire cette différenciation et utiliser l'effet d'entraînement avec des
commentaires natifs tactiles sur Android
si vous le souhaitez, je vais utiliser une opacité tactile pour l'instant et envelopper mon point de vue ici avec une opacité tactile, comme ceci
afin que nous puissions appuyez sur notre élément ici et sur Press, je veux réellement déclencher une fonction que je m'attends à obtenir sur une propriété que nous ne passons
pas encore dans l'élément de repas mais parce que nous n'utilisons pas encore l'élément de
repas n'importe où mais que je vais passer dans le futur, peut-être que nous nommons cela sur un
repas sélectionné ou simplement surSelect, tout ce que vous voulez, je le nommerai surSelectMeal et je m'attends à obtenir cet accessoire
sur l'élément du repas lorsque nous l'utilisons ensuite dans jsx. C'est donc l'opacité palpable, là-dedans, j'ai
ma vision du titre et en fait, cette vue devrait être un peu plus complexe que cela.
Je veux avoir une vue, une vue imbriquée là-dedans comme ceci et une autre vue en dessous, donc je veux
avoir deux rangées.
Ce sera configuré comme une colonne mais ces deux vues ici seront configurées comme des lignes ici.
La première vue devrait également rendre une image d'arrière-plan, de sorte que le titre se trouve devant cette image
d'arrière-plan,
la deuxième vue, la deuxième ligne ici devrait rendre quelques détails sur la recette
sélectionnée, comme sa complexité et sa durée.
Commençons donc par cela avant d'ajouter plus tard l'image, sur ces deux vues, j'ajouterai donc
la propriété de style et pointerai sur la ligne de repas de styles ou tout
ce que vous voulez nommer parce que ce sera une ligne dans ma présentation de repas ici
et je Je vais donc ajouter une ligne de repas là-bas et définir la direction du flex ici sur la ligne, car cela
devrait être des lignes de données. Maintenant, autour de l'élément global ici,
je vais envelopper une autre vue où je veux configurer
un style général de style élément de repas et élément de repas,
qui est également configuré ici dans la feuille de style bien sûr et là, je
veux donner à chaque repas une hauteur de 200 disons, chaque élément de la liste ici et
une largeur de 100% pour prendre toute la largeur disponible et peut-être aussi une couleur de fond de ce look grisâtre ici,
nous pouvons voir si nous voulons garder cela, pour l'instant je vais Utiliser ça.
Maintenant, nous pouvons utiliser l'élément de repas ici et nous n'en avons pas
encore fini, mais nous pouvons commencer à l'utiliser ici dans l'écran de catégorie de repas en l'important bien sûr, en important l'élément de repas à partir du dossier des composants
et là, à partir du fichier d'élément de repas et ensuite le rendre ici, alors retournez ici un repas comme ceci et bien sûr, nous devons maintenant passer certaines données, des données comme le
titre que nous obtenons de itemData. article. le titre et l'accessoire onSelect que
je m'attends à avoir dans le plat de repas que nous avons finalement connecté à l'accessoire onPress de l'opacité tactile,
onSelectMeal, c'est le nom que j'ai choisi, c'est aussi quelque chose que
nous devons
configurer ici lorsque nous utilisons le repas et
cela devrait pointer vers une fonction qui pour l'instant ne fait rien mais
qui chargera plus tard la page de détail de ce repas.
Alors maintenant, nous obtenons le titre sur l'accessoire de titre, d'où l'élément de repas, ici, lorsque nous sortons le titre, nous le faisons à
l'aide d'accessoires. Titre.
Si nous sauvegardons maintenant cela, nous devrions en fait pouvoir voir quelque chose ici, alors attendons que cela se recharge et
oui, nous voyons
notre repas ici et certainement pas trop beau mais au moins, nous voyons un peu plus qu'avant.
Maintenant, ce que j'aimerais avoir ici, c'est un peu d'espacement autour de la liste, mais à l'intérieur de
l'espacement, l'élément de liste devrait prendre toute la largeur disponible et pas seulement la largeur de l'élément le plus large
qui est actuellement ce qui se passe.
Et pour cela, nous pouvons aller à la FlatList et là, ajouter la propriété style et définir cette largeur à 100% pour nous
assurer que la FlatList elle-même prend toute la largeur qu'elle peut obtenir.
Avec cela, nous devons regarder ce que nous voulons ici.
Maintenant, bien sûr, les plats ne sont pas préparés, ils ne ressemblent pas à ce
que je veux qu'ils aient l'air, même si nous y arrivons lentement. Maintenant dans le MealItem. fichier js, nous avons encore
du travail à faire, par exemple, cette
vue ici avec le titre contiendra également l'image plus tard et donc cela devrait être beaucoup plus grand
que la ligne en dessous qui affichera plus tard quelques détails.
Par conséquent, ici, je fusionnerai mes styles de ligne de repas avec un autre objet de style, donc avec le style défini dans un autre objet de feuille de style que je
nommerai l'en-tête du repas ou tout ce que vous voulez lui donner et le même là-bas en passant pour les détails
à la fin, je fusionnerai cela avec
les détails des repas de styles, afin que nous ayons des styles combinés et commençons par l'en-tête du repas
que nous pouvons configurer ici.
L'en-tête du repas à la fin contiendra l'image et également le titre et je veux que la hauteur
soit de disons 80%
de la hauteur disponible, donc cela devrait être très très grand. Les détails du repas obtiendront donc automatiquement les 20% restants et pour voir
si cela fonctionne, affichons quelques détails ici, donc dans cette vue ici, dans cette ligne en dessous de notre ligne
de titre, je veux aussi avoir
du texte ici et là I 'll affichera
la durée des accessoires, puis m par la suite, pendant des minutes, car la durée m sera un nombre que nous traitons
comme des minutes.
Nous avons juste besoin de passer la durée à partir de l'écran des repas de la catégorie bien sûr,
donc quand nous utilisons l'élément de repas, en plus de passer un titre, je définirai l'accessoire de durée parce que nous nous attendons maintenant
à ce que sur l'élément de repas.
Nous obtenons cela de itemData. élément qui est notre repas et là, nous aurons une
propriété de durée parce que nos repas tels que définis dans le modèle ici ont une propriété
de durée et en effet si vous regardez les données factices, voici votre durée qui est alimentée .
Si nous enregistrons cela,
nous voyons maintenant notre durée là-bas et en fait, nous pouvons toujours changer cette hauteur ici à même 90%, devrait être plus élevée qu'elle
ne l'était ici, cela semble mieux
et bien
sûr, vous pouvez également l'expérimenter. Dans la ligne des
détails du repas, je veux également avoir un rembourrage horizontal, donc à gauche et à droite de disons 10 et
justifier mon contenu ici avec un espace entre, gardez à l'esprit que c'est une ligne donc cela le justifiera horizontalement, de sorte que lorsque nous
aurons plusieurs articles, ils y seront bien distribués.
Nous avons donc 20 minutes, sortons plus d'informations là-bas en ajoutant un autre texte
et
là, sortons la complexité, alors ici je sortirai la
complexité et ensuite, je sortirai l'abordabilité. Maintenant, nous avons juste besoin de transmettre ces données également lors de la création de notre repas.
Donc ici en plus de la durée, nous passons en
complexité que nous obtenons ici, itemData. article. la complexité et l'abordabilité, c'est bien sûr
itemData. article. l'accessibilité, comme
ça et si nous enregistrons ceci et laissons ce re-rendu, maintenant nous voyons cette sortie ici. Toujours pas super beau et nous pouvons certainement
améliorer cela mais un bon début. Maintenant simple et abordable ou notre complexité et accessibilité
par conséquent, cela devrait être un peu différent. Nous savons que ce sera du texte
et donc je peux utiliser certaines fonctions ou méthodes Javascript disponibles sur les chaînes,
j'utiliserai simplement toUppercase pour le convertir en majuscules entièrement comme ceci et maintenant cela devrait déjà
être un peu plus joli qu'avant. Maintenant, vous pouvez toujours modifier le style ici, je vais continuer avec ce
style ici pour l'instant et ajoutons maintenant une image d'arrière-plan ci-dessus.
Donc pour cela, nous voulions une image d'arrière-plan derrière ce texte de titre et heureusement, React Native
rend l'ajout d'une telle image d'arrière-plan vraiment très simple. React Native est livré avec un composant intégré, le
composant d'arrière-plan de l'image que nous pouvons utiliser pour rendre une image en arrière-plan
comme vous l'imaginez par son nom. Vous l'ajoutez à côté du composant derrière lequel vous voulez l'ajouter et vous l'ajoutez avant ce
composant, donc ici j'ajoute un fond d'image et sur un fond d'image comme sur l'image normale, vous définissez une source. Ici, ma source est une image web, donc nous passons dans un objet,
si ce serait une image locale, vous utiliseriez require et ce que vous avez appris sur les images locales plus
tôt dans le cours mais ici, c'est une image web, donc nous passons un objet avec un accessoire
URI et là, nous utilisons l'image d'accessoires qui est l'endroit où je m'attends à obtenir cette URL dans ce composant, bien sûr,
nous devons nous assurer de transmettre l'URL sur cet accessoire. Je vais également ajouter un peu
de style ici et ce seront des styles. bgImage que nous allons maintenant ajouter à la feuille de style là-bas,
où vous voulez, peut-être ici, n'a pas vraiment d'importance. Une chose importante ici, vous devez définir la
largeur et la hauteur car c'est une image du Web et je vais les
utiliser à 100% pour les deux car elle devrait remplir tout l'espace qu'elle obtient. Maintenant, nous devons juste nous assurer que nous transmettons cet accessoire d'image ici dans l'écran des repas de catégorie,
donc en plus du titre, ici, je veux également passer dans itemData. article. imageUrl est le nom de celui-ci, vous pouvez voir que dans le
modèle, imageUrl, c'est donc ce que nous transmettons et nous le transmettons à l'image prop parce que c'est ce que nous
attendons et ce que nous mettons ici dans le repas article. Et si vous enregistrez maintenant cela et mélangons les
choses et testons cela sur Android, cela prend juste un peu plus de temps à charger, c'est pourquoi j'utilise généralement
iOS ici, mais maintenant si nous testons cela, nous voyons notre burger ici. Ce que nous ne
voyons plus, c'est notre titre. Pour afficher à nouveau le titre, assurez-vous d'envelopper réellement
l'arrière-plan de l'image autour de lui, c'est ainsi que vous dites à React Native quel contenu doit être
à l'intérieur au-dessus de cette image d'arrière-plan. Alors maintenant avec ça, voici notre titre, pas si facile à lire et nous allons le réparer mais il est là encore.
Nous commençons donc avec cette recette ici, maintenant assurons-nous que le titre est un peu
plus facile à voir en lui donnant un style ici, titre de styles que nous pouvons maintenant configurer là-bas et je veux définir une famille de
polices de open
sans gras, est logique puisque nous enregistrons cette police.
Donnez-lui une taille de police que nous augmentons un peu, peut-être 22,
vous pouvez bien sûr jouer avec.
Donnez-lui une couleur de blanc pour le rendre un peu plus facile à lire et attribuez également une couleur d'arrière-plan afin
que nous puissions toujours la voir, même si l'image d'arrière-plan serait
blanche, auquel cas le texte blanc serait difficile à lire, en donnant c'est une couleur RGBA qui est une couleur qui a
une transparence intégrée pour ainsi dire et c'est simplement une couleur noire qui est un peu transparente et maintenant ajoutez
également un peu de rembourrage ici, le remplissage vertical
de cinq devrait bien paraître pour que le la boîte de couleur d'arrière-plan ici ne se trouve pas directement sur les bords du texte
qui est à l'intérieur de la boîte et le rembourrage horizontal de 12 peut-être. Avec cela, nous devrions toujours voir notre
titre et en fait, nous pouvons probablement augmenter cette transparence
ici, diminuer l'opacité, oui, cela semble
un peu
plus agréable, je pense, comme ça. Et la seule chose que je veux faire maintenant,
c'est que je veux déplacer ce titre vers le bas en
bas de cette image et donc sur le style bgImage que j'ai ici, je vais définir Justifier le contenu pour fléchir car l'image d'arrière-plan agit automatiquement comme une flexbox pour ainsi
dire, comme une vue, afin que nous puissions justifier notre contenu là-dedans et maintenant
nous avons ce titre en bas.
Nous pourrions maintenant également centrer le texte en allant au titre ici et en ajoutant le texte aligner le centre et au cas où il serait trop
long, trop grand, en plus bien sûr
de réduire la taille de la police que je ferai un peu
à 20, bien sûr vous pouvez allez à ce texte ici où vous sortez un titre et définissez le nombre
de lignes à 1 et cela garantira que
le texte est automatiquement raccourci s'il est trop grand, comme ici pour la salade aux tomates cerises. Nous voyons également un effet étrange ici sur iOS où
nous avons un arrière-plan supplémentaire derrière notre texte et pas seulement la boîte colorée d'arrière-plan ici.
C'est parce que j'ai appliqué ma couleur d'arrière-plan et ainsi de suite un effet directement sur le texte, pour corriger cela, nous pouvons le couper
du titre ici et ne configurer que la couleur et ainsi de suite et ajouter à la place un conteneur de
titre ici où nous ajoutons cette couleur d'arrière-plan et ainsi de suite et envelopper ce conteneur autour de notre titre, donc une vue supplémentaire
que nous ajoutons ici et il est tout à fait normal dans React Native d'imbriquer plusieurs de
ces vues et sur cette vue, nous pouvons maintenant ajouter un style, un conteneur de titre de styles et si nous l'enregistrons, nous devrions nous débarrasser de ce comportement
étrange sur iOS,
oui maintenant nous n'avons pas cette boîte supplémentaire là-bas,
au lieu de cela nous avons juste une couleur d'arrière-plan et la même sur Android.
Alors maintenant, cela ne semble pas trop mal, mais je ne suis
pas entièrement satisfait, je voudrais également centrer mes détails ici verticalement et lui donner un peu plus d'espace, je suppose et
pour cela, nous pouvons donner l'en-tête peut-être 85% de la hauteur et du détail du repas ici, gardez à l'esprit que notre direction de
flexion est la ligne parce que nous fusionnons la ligne du repas et le détail du repas ici et donc
notre axe transversal est de haut en
bas, donc si nous voulons centrer verticalement, c'est l'axe transversal sur lequel nous devons centrer.
Donc, ici, nous pouvons définir les éléments d'alignement qui font le positionnement de l'axe transversal au centre
et également changer notre couleur ici un peu en une couleur plus agréable, ce
gris très clair, # f5f5f5 pourrait avoir l'air un peu mieux, oui, il le
fait définitivement .
Maintenant, pour nous assurer que nous centrons vraiment verticalement, nous devons simplement être plus explicites sur
la hauteur que doivent prendre
les détails de notre repas, nous prenons 85% sur l'en-tête, donc sur les détails ici, nous pouvons
définir une hauteur de 15% évidemment pour prendre le reste, oui et je dirais que cela semble assez décent ici, énumérez
certainement les éléments avec lesquels nous pouvons travailler ici.
Je vais maintenant ajouter un peu un rayon de bordure parce que vous savez que j'aime les
rayons de bordure, donc j'ajouterai ici un rayon de bordure de 10 afin que nous ayons des coins arrondis et avec cela, si vous revenez en arrière, nous
' vous y êtes presque, mais vous remarquerez que l'image ne respecte pas réellement le rayon de la bordure.
Maintenant, pour corriger cela, sur l'élément de repas, il suffit de dire débordement caché afin qu'aucun élément enfant ne puisse sortir de cet
espace ou de cette forme que nous
construisons ici.
Et avec cela, c'est un début, quelque chose avec lequel nous pouvons travailler, maintenant
nous voulons bien sûr nous assurer que lorsque nous tapons sur un tel élément, nous allons réellement à la page de détails.