Konzentrieren wir uns also zunächst auf den Bildschirm mit den Essensdetails,
also
auf den Teil hier, in dem wir die Details des ausgewählten Rezepts anzeigen.
Im Moment haben wir nur den Dummy-Inhalt des Essensdetailbildschirms und das ist natürlich nicht der Inhalt,
den ich wirklich dort haben möchte, sondern
was sollte dort drin sein?
Wenn wir uns unser Essensmodell ansehen, ist es wahrscheinlich sinnvoll, das Bild dort zu haben. Bitte denken Sie
daran, dass der Titel bereits in unserer Kopfzeile angezeigt wird. Daher ist es sinnvoll,
das Bild hier oben und vielleicht zu haben Darunter wiederholen Sie vielleicht noch einmal die Dauer, Erschwinglichkeit und Komplexität, so wie wir es hier
unter unserem Rezept tun, und listen Sie auch darunter
alle Zutaten und die Schritte auf, die zur Herstellung dieses Gerichts erforderlich sind. Das ist am Ende das, was ich auf dieser Seite
hier auf dem MealDetailScreen haben möchte, und daher halte ich es für
sinnvoll, zunächst eine Bildlaufansicht hinzuzufügen, da wir dort sicherlich eine Menge Inhalte haben werden,
die höchstwahrscheinlich nicht vorhanden sind passen auf einen Bildschirm und schon gar nicht auf alle möglichen Gerätegrößen.
Also werde ich hier eine Bildlaufansicht hinzufügen und diese hier um meinen Inhalt wickeln.
Jetzt haben wir hier ein
paar verschiedene Abschnitte, zum Beispiel ganz oben, ich möchte mein Bild haben und dafür
werde ich auch die Bildkomponente aus React Native hier importieren, damit wir hier ein
Bild rendern können, nicht ein Hintergrundbild, aber
ein normales Bild, und ich möchte dies hinzufügen, sagen wir hier ganz oben, so etwas.
Jetzt nach dem Bild möchte ich eine Ansicht mit der Dauer, Erschwinglichkeit und Komplexität haben, die ich erwähnt habe, also im
Grunde das gleiche Setup, das wir in der Mahlzeit haben, das könnte man hier sagen, und deshalb werde ich die Ansicht tatsächlich
von dort kopieren und dann können wir es anpassen, wie wir es hier im MealDetailScreen brauchen, also
werde ich diese Ansicht einfach durch die Kopieransicht ersetzen.
Dazu müssen wir natürlich die Standardtextkomponente hier importieren.
Fügen
wir dies hinzu und importieren wir den Standardtext aus
dem Standardtext der Komponenten. Das ist also die nächste Zeile
und danach möchte ich meine Zutaten und die Schritte haben, die Sie ausführen müssen.
Also können wir hier Text hinzufügen, wo wir Zutaten sagen, und dort möchte ich auch einen Stil anwenden, wie Stile, Titel, so etwas oder nur Titel,
weil ich hier eine fette
Überschrift haben möchte, vielleicht die Schriftgröße erhöhen. Darunter haben Sie meine Liste der Zutaten, also Liste
der Zutaten und das ist natürlich nicht der endgültige Inhalt, stattdessen werden wir hier eine Liste
rendern und darunter werde ich dies hier wiederholen, weil ich dann einen Titel haben möchte, wo ich sage Schritte und dann eine
Liste von Schritten darunter und jetzt werde ich diesen alten Inhalt dort unten los und damit möchte
ich arbeiten.
Jetzt fehlen natürlich alle Stile und auch die Requisiten-Dauer und so weiter, was
nichts bringt. Stattdessen müssen wir hier mit der ausgewählten Mahlzeit, der ausgewählten Mahlzeit-Dauer, der ausgewählten
Mahlzeit-Komplexität, der ausgewählten Mahlzeit-Erschwinglichkeit und für das Image arbeiten Zum Beispiel möchte ich hier eine Quelle hinzufügen, da die Quelle ein Netzwerkbild ist und
ein Objekt mit einer URI-Eigenschaft ist, die auf selectedMeal zeigt. imageUrl, um dies zu laden, und wir müssen dort
auch einen Stil anwenden, um eine Breite und eine Höhe festzulegen. Hier
möchte ich also auf Stile zeigen. Bild sagen wir, und all diese Stile fehlen,
wie gesagt, also fügen wir das hinzu. Hier für diesen Stil möchte ich auch Stile sagen. Details vielleicht, weil wir die Details dieses
Rezepts anzeigen und wir zum Stylesheet gehen. Entfernen Sie daher den Bildschirm, den wir nicht
mehr
benötigen. Stattdessen fügen wir Bild und Details hinzu. Für Details müssen wir nun die Flexrichtung auf Zeile setzen, da dies
alle Details in einer Zeile sein sollten.
Wir können ein wenig Polsterung in alle Richtungen von vielleicht 15 hinzufügen und auch einen begründeten
Platzinhalt hinzufügen, um unsere Detailelemente hier schön zu verteilen, das sollte gut sein.
Darüber hinaus müssen wir auf dem Bild hier auch einen Stil hinzufügen. Dort sollte die Breite 100% betragen. Nehmen wir
an, um die volle verfügbare Breite zu erhalten, und für die Höhe gehe ich mit
200, obwohl Sie
das natürlich könnten Berechnen Sie dies dynamisch mit der Dimensions-API, um beispielsweise immer einen
bestimmten Bruchteil der verfügbaren Höhe zu übernehmen, oder spielen Sie hier einfach mit anderen Werten herum.
Ich werde damit anfangen und hier einen Blick darauf werfen, und das
sieht nicht allzu schäbig aus,
das ist nicht schlecht.
Jetzt können Sie hier definitiv auch einige Bonusarbeiten ausprobieren, einige Bonusaufgaben und zum Beispiel diese Details einfärben -
einfach, erschwinglich und die Dauer hängt davon ab, ob sie eher kurz ist oder von den
unterschiedlichen Werten, die Sie für einfach haben, für die Komplexität und die Erschwinglichkeit .
Ich werde das hier nicht tun, aber Sie können sich natürlich die Essensdaten ansehen, um zu sehen, welche Werte wir
dort haben, um abzuleiten, was kurz ist, was eine mittlere Dauer ist, was eine lange Dauer ist und um zu sehen, welche Werte
für Komplexität und Komplexität verwendet werden usw. und dann können Sie tatsächlich einige hinzufügen, wenn Sie prüfen, ob
die verschiedenen Werte, die wir hier im Detailbild der Mahlzeit für diese Details ausgeben, unterschiedlich gestaltet werden sollen, damit Sie den
Text je nach Länge unterschiedlich färben oder nicht. Ich werde das hier nicht tun, weil
es nur eine zusätzliche Arbeit ist, die der Navigation, die im Mittelpunkt dieses Moduls steht, nicht
wirklich viel hinzufügt.
Stattdessen werde ich mich auf Zutaten und Schritte konzentrieren. Dort besteht ein erster Schritt darin, sicherzustellen, dass der Titel hier
richtig gestaltet ist.
Fügen wir also dem Stylesheet einen Titel hinzu, und dort füge ich eine Schriftfamilie hinzu und setze diese so, dass
sie ohne Fettdruck geöffnet wird, setze die Schriftgröße auf 22 und setze den Text auf Mitte aus, um den Text in der
Mitte zu zentrieren, und damit, wenn wir überprüfen dies, das sieht ganz gut aus.
Jetzt möchte ich natürlich auch meine Zutaten in meinen Schritten ausgeben. Dafür ist es wichtig zu verstehen,
dass es sich bei den Dummy-Daten um Arrays handelt. Dies
sind meine Zutaten, zum Beispiel
meine Schritte, und Sie sehen, dass nur Text darin enthalten ist Arrays. Ich möchte meinen Text hier nur als Liste
ausgeben und ich werde keine FlatList verwenden, da Sie dies tun könnten. Sie könnten sozusagen scrollbare Container darin
haben, aber ich werde einfach die Zutaten und die Schritte darüber rendern andere.
Hier können wir also einen guten alten Ansatz verwenden, den wir von Vanilla React oder React for Web
kennen, den ich auch früher im Kurs gezeigt habe. Wir können unsere ausgewählte Mahlzeit verwenden und dort die Zutaten, die
eine Reihe von Zeichenfolgen sind, und diese in eine Reihe von Komponenten
abbilden. Auf diese Weise können Sie eine Liste von Daten in React und auch React Native ausgeben. Oft verwenden Sie
FlatList, aber hier verwenden wir Dies ist nicht erforderlich, da es sich nicht um eine unendliche
Menge handelt. Daher benötigen wir diese Optimierungen nicht und haben eine umlaufende Bildlaufansicht um den gesamten Bildschirm, sodass wir auch
einen Bildlauf durchführen können, wenn wir mehr ausgeben, als auf den Bildschirm passt. Wir sind also
absolut in Ordnung mit diesem Ansatz und
daher werde ich hier meine einzige Zutat in dieser Map-Funktion haben und Map ist eine Methode, die in JavaScript
integriert ist, wie Sie wissen.
Hier müssen wir jetzt ein jsx-Element zurückgeben und was ich
zurückgeben möchte, ist Eine Textkomponente, bei der ich einfach eine Zutat ausgebe, weil die Zutaten eine Reihe von Zeichenfolgen
sind. Die Zutat
ist also nur eine Zeichenfolge. Hier müssen
wir auch einen Schlüssel angeben. Dies ist eine Anforderung von React, und wir können die
Zutat als Schlüssel verwenden, weil wir dies tun werden Haben Sie jede Zutat immer nur einmal.
Das ist garantiert einzigartig, so
werden unsere Mahlzeiten zubereitet. Wenn wir dies
speichern und uns hier ein Rezept ansehen, sehen wir unsere Zutaten. Jetzt für das Styling können wir dort sicherlich etwas
tun, und ich werde es
in einer Sekunde tun, aber bevor ich das tue, lassen Sie mich dies für
die Schritte hier wiederholen und diesen Text durch selectedMeal ersetzen. Schritte und geben Sie dann jeden Schritt hier aus, der ebenfalls nur
eine Zeichenfolge ist und der auch in einem Text eindeutig ist. Wenn dies hinzugefügt wird, sollten wir auch die Schritte für unser Essen sehen, in der Tat.
Jetzt kann das Styling wieder ein wenig verbessert werden und wir werden genau das
tun. Ich denke, es ist sinnvoll, eine separate Komponente oder Renderfunktion dafür zu erstellen, und ich werde eine separate Komponente erstellen, wir werden
sie in derselben Datei speichern Obwohl wir es wirklich nur in dieser Datei verwenden, können Sie aber auch eine
neue
Datei erstellen, ganz nach Ihren Wünschen. Dort habe ich mein
Listenelement, das Requisiten erhält, wo ich zurückkomme, und jetzt möchte ich hier eine Ansicht verwenden, die ich
als Wrapper importiere, damit ich diesen Container formatieren und dort meinen Text haben
kann, in dem ich Requisitenkinder ausgeben kann und jetzt wird diese Ansicht hier einen Stil
von Stilen erhalten. ListItem vielleicht, damit wir das
schön gestalten können, und hier möchte ich natürlich keinen Text verwenden, sondern Standardtext,
auch hier
natürlich, damit wir unseren eigenen benutzerdefinierten Text nutzen können.
Lassen Sie uns nun für den Listenelementstil hier zum Stylesheet gehen und ein Listenelement hinzufügen. Jedes Listenelement sollte einen Rand
haben, einen vertikalen Rand von beispielsweise 10 und einen horizontalen Rand von beispielsweise 20, also mehr Abstand
nach links und rechts und lassen Sie uns hier vielleicht auch eine hellgraue Randfarbe mit #ccc und einer Randbreite von 1 hinzufügen.
Wir werden sehen, wie das aussieht, und dann
auch ein bisschen Polsterung hinzufügen, 10 in alle Richtungen und wir Ich werde sehen, wie
das aussieht.
Jetzt müssen wir nur noch sicherstellen, dass wir unsere Listenelementkomponente verwenden, und wir geben sie zurück, indem wir bei der Ausgabe der
Zutaten anstelle von Text hier immer noch Zutaten zwischen den öffnenden und schließenden Tags unserer
eigenen benutzerdefinierten Komponente übergeben, weil wir dort sind Verwenden von Requisitenkindern, die den Inhalt verwenden, den wir zwischen
dem Öffnen und Schließen von Tags übergeben, und
wir tun dasselbe für unsere Schritte. Schauen wir
uns das an,
ja, sieht nicht schlecht aus. Wir bekommen unsere Schritte hier, haben unsere Zutaten, natürlich können Sie dieses
Styling verfeinern, genau auf Ihre Anforderungen abstimmen, so wie Sie es wollen, aber ich bin eigentlich ziemlich zufrieden damit und damit
haben wir ein grundlegendes Detail Bildschirm und natürlich funktioniert dieser Detailbildschirm auch für unsere Favoriten, da
wir dort ein und denselben Bildschirm verwenden.
Das sieht also ganz gut aus, der Filterbildschirm fehlt jetzt.