Um die einzelnen Elemente zu formatieren, werde ich erneut eine separate Komponente erstellen
und sie als Mahlzeitelement bezeichnen. js, der Name
liegt wie immer ganz bei Ihnen und Sie
kennen das Spiel. Wir erstellen eine
React-Komponente durch Importieren von React. Wir benötigen wahrscheinlich auch Ansicht, Text und Stylesheet und möglicherweise
auch einige andere Dinge von React Native. Dann richten wir die Komponente Mahlzeit ein, wo wir Requisiten erhalten
und wo wir am Ende etwas jsx zurückgeben. Richten Sie hier ein Stylesheet ein, speichern Sie es in einer Styles-Konstante
mit Stylesheet create, an die wir ein Objekt übergeben, und exportieren Sie am Ende unser Mahlzeitelement hier als Standarddatei. Jetzt, da hier, in Mahlzeitelement, in dieser Komponente, müssen
wir natürlich einen jsx-Code
für dieses Mahlzeitelement zurückgeben, und das ist etwas, was ich vom Kategorie Mahlzeitbildschirm
erhalte. Dort habe
ich diese Ansicht mit meinem Text hier, das ist am Ende, was ich ausgeben möchte, ein bisschen komplexer als das, aber ich
werde es von dort ausschneiden und es zu Mahlzeitelement verschieben und dort, diese Ansicht hier
aber von zurückgeben Natürlich sind wir damit nicht fertig. Zum einen sollte dies auch berührbar sein,
da wir eine Mahlzeit auswählen können. Wir können ein solches Rezept auswählen, das auf
den Detailbildschirm übertragen werden soll, sodass ich berührbare Deckkraft importiere.
Jetzt können Sie diese Unterscheidung natürlich wieder vornehmen und den Ripple-Effekt mit berührbarem nativem
Feedback auf Android verwenden,
wenn Sie möchten. Ich werde vorerst mit berührbarer Deckkraft arbeiten und meine Ansicht hier mit berührbarer Deckkraft umschließen, damit wir dies können
Tippen Sie hier und onPress auf unseren Artikel. Ich möchte tatsächlich eine Funktion auslösen, die ich für eine Eigenschaft erwarte, die wir noch nicht an den Artikel
übergeben, aber weil wir den Artikel noch nirgendwo verwenden, aber ich werde Pass in
der Zukunft auf, vielleicht nennen wir dies bei ausgewählten Mahlzeiten oder nur bei Auswahl, was auch
immer Sie wollen, ich werde es bei Auswahl von Mahlzeit benennen und ich erwarte, dass diese Requisite auf dem
Mahlzeitartikel steht, wenn wir sie dann in jsx verwenden. Das ist also die berührbare Deckkraft,
da habe ich meine Ansicht mit dem Titel und eigentlich sollte diese Ansicht etwas komplexer sein.
Ich möchte eine Ansicht haben, eine verschachtelte Ansicht wie diese und eine andere Ansicht darunter, also möchte ich
zwei Zeilen haben.
Dies wird als Spalte eingerichtet, aber diese beiden Ansichten hier werden hier als Zeilen eingerichtet.
In der ersten Ansicht sollte auch ein Hintergrundbild gerendert werden, sodass der Titel vor diesem Hintergrundbild angezeigt
wird.
In der zweiten Ansicht sollte in der zweiten Zeile einige Details zum ausgewählten Rezept
wie Komplexität und Dauer wiedergegeben werden.
Beginnen wir also damit, bevor wir das Bild später hinzufügen. In beiden Ansichten
füge ich daher die Stileigenschaft hinzu und zeige auf die Stilmahlzeit oder wie
auch immer Sie dies benennen möchten, da dies eine Zeile in meiner Essenspräsentation hier
und ich sein wird Ich werde daher dort unten eine Mahlzeitreihe hinzufügen und die Flexrichtung hier natürlich auf Zeile setzen,
da dies Datenzeilen sein sollten. Um das Gesamtelement hier herum
werde ich nun eine andere Ansicht einschließen, in der ich
einen allgemeinen Stil für Stile, Mahlzeitelemente und Mahlzeitelemente einrichten möchte, der
natürlich auch hier im Stylesheet konfiguriert ist, und dort möchte ich jeder Mahlzeit eine
Höhe geben von 200 sagen wir, jedes Element in der Liste hier und eine Breite
von 100%, um die volle verfügbare Breite und vielleicht auch eine Hintergrundfarbe dieses gräulichen Aussehens hier zu nehmen, können wir sehen,
ob wir das behalten wollen, für den Moment werde ich verwende das.
Jetzt können wir das Mahlzeitelement hier verwenden und wir sind noch
nicht damit fertig, aber wir können es hier in der Kategorie Mahlzeitenbildschirm verwenden, indem wir es natürlich importieren, das Mahlzeitelement aus dem Komponentenordner und dort aus der
Mahlzeitelementdatei importieren und dann rendern Sie dies hier, also geben Sie den Artikel hier wie folgt zurück, und natürlich müssen wir jetzt einige Daten übergeben, Daten wie den Titel,
den wir von itemData erhalten. Artikel. Titel und die onSelect-Requisite, die
ich in dem Essensartikel erwarte, den wir am Ende mit der onPress-Requisite onSelectMeal der berührbaren Deckkraft verbinden,
das war der Name, den ich gewählt habe. Das müssen
wir auch
hier einrichten, wenn wir die Mahlzeit verwenden
item und dies sollte auf eine Funktion verweisen, die im Moment
nichts tut, aber später die Detailseite für diese Mahlzeit lädt.
Jetzt erhalten wir den Titel auf der Titelrequisite, daher das Essen, hier, wenn wir den Titel ausgeben, tun wir dies mit Hilfe
von Requisiten. Titel.
Wenn wir das jetzt speichern, sollten wir hier tatsächlich etwas sehen können, also warten wir, bis es wieder geladen ist, und
ja, wir sehen
unser Essen hier und sicherlich nicht zu schön, aber zumindest sehen wir ein bisschen mehr als zuvor.
Was ich hier haben möchte, ist ein kleiner Abstand um die Liste, aber innerhalb
des Abstands sollte das Listenelement die volle verfügbare Breite annehmen und nicht nur die Breite des
breitesten Elements, das gerade passiert.
Dazu können wir zur FlatList gehen und dort die style-Eigenschaft hinzufügen und diese Breite auf 100% setzen, um sicherzustellen, dass die
FlatList selbst die gesamte Breite annimmt, die sie erhalten kann.
Damit sollten wir schauen müssen, was wir hier wollen.
Jetzt sind die Mahlzeiten natürlich nicht fertig, sie sehen nicht so aus,
wie ich sie haben möchte, obwohl wir auch langsam dort ankommen. Jetzt im MealItem. js Datei, wir haben noch
einige Arbeiten zu erledigen, zum Beispiel wird
diese Ansicht hier mit dem Titel später auch das Bild enthalten und daher sollte diese viel größer
sein als die Zeile darunter, die später nur einige Details ausgibt.
Daher werde ich hier meine Essensreihenstile mit einem anderen Stilobjekt zusammenführen, also mit dem Stil, der in einem anderen Stylesheet-Objekt eingerichtet ist, das ich als Essenskopf
oder wie auch immer Sie es benennen möchten, und das gleiche dort unten übrigens für die
Details Am Ende werde ich
dies mit Stilmahlzeitdetails zusammenführen, so dass wir Stile kombiniert haben und mit dem Essenskopf beginnen, den
wir hier einrichten können.
Der Header der Mahlzeit am Ende enthält das Bild und auch den Titel, und ich möchte, dass
die Höhe davon 80%
der verfügbaren Höhe beträgt, daher sollte diese sehr, sehr groß sein. Die Essensdetails erhalten daher automatisch die restlichen 20%. Um zu sehen,
ob dies funktioniert, geben wir hier einige Details aus. In dieser Ansicht hier, in dieser Zeile unter
unserer Titelzeile, möchte ich auch hier
und da einen Text haben Lassen Sie
uns sagen, Requisiten Dauer und dann m danach für Minuten, weil m Dauer eine Zahl ist, die wir als
Minuten behandeln.
Wir müssen natürlich nur die Dauer aus dem Bildschirm "Kategorie Mahlzeiten" übergeben. Wenn
wir also den Mahlzeitartikel verwenden, setze ich neben der Übergabe eines Titels die Dauer-Requisite, da wir dies
jetzt für den Mahlzeitartikel erwarten.
Wir erhalten dies von itemData. Artikel, der unsere Mahlzeit ist, und dort haben
wir eine Dauer-Eigenschaft, da unsere Mahlzeiten, wie im Modell hier definiert, eine Dauer-Eigenschaft haben.
Wenn Sie sich die Dummy-Daten ansehen, ist dies hier Ihre Dauer, die eingegeben wird .
Wenn wir dies
speichern, sehen wir jetzt unsere Dauer dort unten und tatsächlich können wir diese Höhe hier immer noch auf sogar 90% ändern, sollte höher sein
als hier, das sieht besser aus
und natürlich
können Sie auch damit experimentieren. In der Zeile mit
den Essensdetails möchte ich auch eine horizontale Polsterung haben, also links und rechts von beispielsweise 10 und
meinen Inhalt hier mit einem Abstand dazwischen begründen. Denken Sie daran, dass es sich um eine Zeile handelt, damit dies horizontal gerechtfertigt ist
mehrere Artikel, werden sie dort schön verteilt.
Wir haben also 20 Minuten Zeit, geben wir dort weitere Informationen aus, indem wir einen weiteren
Text
hinzufügen, und geben dort die Komplexität aus. Hier gebe ich
die Komplexität aus und anschließend die Erschwinglichkeit. Jetzt müssen wir nur noch diese Daten eingeben, wenn wir unseren Mahlzeitartikel erstellen.
Hier übergeben wir also neben der Dauer die Komplexität,
die wir hier erhalten, itemData. Artikel. Komplexität und Erschwinglichkeit, das sind natürlich
itemData. Artikel. Erschwinglichkeit, so
und wenn wir dies speichern und neu rendern lassen, sehen wir jetzt diese Ausgabe hier. Immer noch nicht super schön und wir können dies
definitiv verbessern, aber einen schönen Start. Jetzt einfach und erschwinglich oder unsere Komplexität und Erschwinglichkeit
daher, sollte das etwas anders gestaltet werden. Wir wissen, dass es sich um Text handelt,
und daher kann ich einige Javascript-Funktionen oder -Methoden verwenden, die wir für Zeichenfolgen zur
Verfügung haben. Ich werde einfach toUppercase verwenden, um es vollständig in Großbuchstaben umzuwandeln, und jetzt sollte dies bereits
ein bisschen besser aussehen als zuvor. Jetzt können Sie das Styling hier noch optimieren. Ich werde dieses Styling
hier erst einmal anwenden und jetzt ein Hintergrundbild oben hinzufügen.
Aus diesem Grund wollten wir ein Hintergrundbild hinter diesem Titeltext und dankenswerterweise macht React Native
das Hinzufügen eines solchen Hintergrundbilds wirklich sehr einfach. React Native wird mit einer integrierten Komponente geliefert, der
Bildhintergrundkomponente, mit der wir ein Bild im Hintergrund rendern können, wie Sie es
sich unter dem Namen vorstellen würden. Sie fügen es neben der Komponente hinzu, hinter der Sie es hinzufügen möchten, und Sie fügen es vor dieser
Komponente hinzu. Hier füge ich also einen Bildhintergrund hinzu und auf dem Bildhintergrund wie auf dem normalen Bild legen Sie eine Quelle fest. Hier ist meine Quelle ein Webbild, also übergeben wir ein Objekt. Wenn
es ein lokales Bild wäre, würden Sie require verwenden und was Sie früher im Kurs über lokale Bilder
gelernt haben, aber hier ist es ein Webbild, also übergeben wir ein Objekt mit einer URI-Requisite
und dort verwenden wir ein Requisitenbild. Dort erwarte ich, dass diese URL in dieser Komponente angezeigt wird. Daher müssen wir
natürlich sicherstellen, dass wir die URL für diese Requisite übergeben. Ich werde hier auch etwas
Styling hinzufügen und das werden Styles sein. bgImage, das wir jetzt dort unten zum Stylesheet hinzufügen, wo
immer Sie wollen, vielleicht hier, spielt keine Rolle. Eine wichtige Sache hier ist, dass Sie Breite und Höhe
einstellen müssen, da es sich um ein Bild aus dem Web handelt, und ich werde sie
zu 100% für beide verwenden, da es den gesamten Raum ausfüllen soll, den es erhält. Jetzt müssen wir nur noch sicherstellen, dass wir diese Bild-Requisite hier in der Kategorie Mahlzeiten-Bildschirm übergeben.
Neben dem Titel möchte ich hier auch itemData übergeben. Artikel. imageUrl ist der Name davon. Sie können das im
Modell imageUrl sehen. Das geben wir also weiter und geben es an die Image-Requisite weiter, weil wir
das erwarten und hier im Essen einstellen Artikel. Und wenn Sie das jetzt speichern und die
Dinge durcheinander bringen und auf Android testen, dauert das Laden etwas länger, weshalb ich hier normalerweise iOS
verwende. Wenn wir dies jetzt testen, sehen wir hier unseren Burger. Was wir aber nicht
mehr sehen, ist unser Titel. Um den Titel erneut anzuzeigen, stellen Sie sicher, dass
Sie den Bildhintergrund tatsächlich um ihn wickeln. Auf diese Weise teilen Sie React Native mit, welcher Inhalt
sich über diesem Hintergrundbild befinden soll. Hier ist also unser Titel, der nicht so einfach zu lesen ist, und wir werden das beheben, aber er ist wieder da.
Also fangen wir hier mit diesem Rezept an. Stellen wir jetzt sicher, dass der Titel
etwas leichter zu sehen ist, indem wir ihm hier einen Stil geben, einen Stiltitel, den wir jetzt dort unten einrichten können, und ich möchte eine offene
Schriftfamilie festlegen Sans
Bold, macht Sinn, da wir diese Schriftart registrieren.
Geben Sie ihm eine Schriftgröße, die wir ein wenig erhöhen, vielleicht 22,
damit können Sie natürlich herumspielen.
Geben Sie ihm eine weiße Farbe, um das Lesen zu erleichtern, und weisen Sie ihm auch eine Hintergrundfarbe zu,
damit wir sie immer sehen können, auch wenn das Hintergrundbild
weiß wäre. In diesem Fall wäre weißer Text schwer zu lesen Dies ist eine RGBA-Farbe, die sozusagen eine eingebaute
Transparenz hat, und dies ist einfach eine schwarze Farbe, die ein bisschen transparent ist und jetzt auch
hier ein bisschen Polsterung hinzufügt. Die vertikale Polsterung
von fünf sollte gut aussehen, damit die Das farbige Hintergrundfeld hier befindet sich nicht direkt an den Rändern des Textes, der
sich innerhalb des Felds befindet, und wird möglicherweise horizontal mit 12 aufgefüllt. Damit sollten wir immer unseren Titel sehen
und tatsächlich können wir diese Transparenz hier wahrscheinlich erhöhen, die
Deckkraft verringern, ja, das sieht
ein bisschen
schöner aus, denke ich, so. Und das Einzige, was ich jetzt tun möchte, ist,
dass ich diesen Titel am unteren Rand dieses Bildes nach
unten verschieben möchte. Daher setze ich für den bgImage-Stil, den ich hier habe, den Rechtfertigungsinhalt auf flex end, da das Hintergrundbild automatisch als fungiert Eine Flexbox sozusagen
wie eine Ansicht, damit wir unseren Inhalt dort rechtfertigen können und jetzt
haben wir diesen Titel unten.
Wir könnten den Text jetzt auch zentrieren, indem wir hier zum Titel gehen und das Textausrichtungszentrum hinzufügen. Falls er zu lang und zu groß
ist, können Sie natürlich auch die
Schriftgröße verkleinern, was ich natürlich auf 20 tun werde Gehen Sie
zu diesem Text hier, wo Sie einen Titel ausgeben und die Anzahl der Zeilen auf 1 setzen.
Dadurch wird sichergestellt, dass der Text automatisch
gekürzt wird, wenn er zu groß ist, wie hier für den Salat mit Kirschtomaten. Wir sehen hier auch unter iOS einen seltsamen Effekt, bei
dem wir einen zusätzlichen Hintergrund hinter unserem Text haben und nicht nur das hintergrundfarbene Feld hier.
Das liegt daran, dass ich meine Hintergrundfarbe und so weiter direkt auf den Text angewendet habe. Um dies zu beheben, können
wir sie hier aus dem Titel ausschneiden und nur die Farbe usw. dort einrichten und stattdessen hier
einen Titelcontainer hinzufügen, in dem wir diese Hintergrundfarbe hinzufügen und so weiter und wickeln Sie diesen Container um unseren Titel,
also fügen wir hier eine zusätzliche Ansicht hinzu, und es ist in React Native
ganz normal, mehrere solcher Ansichten zu verschachteln. In dieser Ansicht können wir jetzt Stil, Stile, Titelcontainer hinzufügen, und wenn wir das speichern, Wir sollten
dieses seltsame
Verhalten unter iOS loswerden. Ja, jetzt haben
wir dort keine zusätzliche Box, sondern nur eine Hintergrundfarbe und dieselbe unter Android.
Das sieht jetzt nicht schlecht aus, aber ich bin nicht ganz
glücklich. Ich möchte meine Details auch hier vertikal zentrieren und ein bisschen mehr Platz geben, denke ich, und dafür können
wir dem Header vielleicht 85% geben Beachten Sie bei der Höhe und den Details der Mahlzeit hier, dass unsere Flexrichtung die Reihe
ist, da wir hier die Reihen der Mahlzeiten und die Details der Mahlzeiten zusammenführen und daher unsere Querachse von
oben nach unten verläuft. Wenn wir also
vertikal zentrieren möchten, ist dies der Fall die Querachse, auf der wir zentrieren müssen.
Hier können wir also Ausrichtungselemente festlegen, bei denen die Querachsenpositionierung zentriert wird, und hier auch
unsere Farbe ein wenig in eine etwas schönere Farbe ändern. Dieses sehr
hellgraue # f5f5f5 sieht möglicherweise etwas besser aus, ja, das tut es
definitiv .
Um sicherzustellen, dass wir wirklich vertikal zentrieren, müssen wir nur genauer angeben, wie hoch unsere
Mahlzeitendetails sein sollen. Wir nehmen
85% für die Kopfzeile, sodass wir für die Details hier offensichtlich eine Höhe von 15% festlegen können
um den Rest zu erledigen, ja, und ich würde sagen, das sieht hier ziemlich anständig aus. Listen Sie auf jeden Fall
Elemente auf, mit denen wir hier arbeiten können.
Ich werde jetzt nur einen kleinen Randradius hinzufügen, weil Sie wissen, dass ich Randradien
mag, also werde ich hier einen Randradius von 10 hinzufügen, damit wir einige abgerundete Ecken haben, und damit, wenn Sie zurückgehen, '
Sie sind fast da, aber Sie werden feststellen, dass das Bild den Randradius nicht berücksichtigt.
Um das zu beheben, müssen wir auf dem Essensartikel nur "Überlauf versteckt" sagen, damit kein untergeordneter Artikel diesen Raum oder diese
Form, die wir hier bauen, verlassen
kann.
Und damit ist das ein Anfang, etwas, mit dem wir arbeiten
können. Jetzt wollen wir natürlich sicherstellen, dass wir, wenn wir auf ein solches Element tippen, tatsächlich zur Detailseite gehen.