Lassen Sie uns jetzt am Bestellbildschirm arbeiten und mehr als nur diesen langweiligen Text ausgeben.
Genau wie beim Warenkorbbildschirm und beim Produktübersichtsbild möchte ich jetzt eine komplexere
Bestellposition und erstelle daher eine separate Bestellartikelkomponente im Komponentenordner und dort in einem Shopordner.
Wie immer liegt es an Ihnen, ob Sie
das auch tun, aber da dies keine sehr kleine Komponente ist, bevorzuge ich es, sie in einer separaten Datei zu haben.
Also werde ich React from React hier importieren und natürlich einige Dinge aus React Native importieren, und das wäre
die Ansicht, der Text, das Stylesheet, da wir sicherlich auch einige Stile einrichten werden und auch eine Schaltfläche, weil ich auch
Sie möchten in der Lage sein, eine Bestellung so zu erweitern, dass nicht immer alle Artikel angezeigt werden, die Teil der Bestellung
sind, sondern dass wir sie anzeigen können, wenn wir möchten. Jetzt können wir hier unsere Bestellartikelkonstante erstellen, so
dass die Komponente selbst Requisiten empfängt und am Ende ihren Körper hier hat und etwas
jsx-Code zurückgibt. Hier benötigen wir ein Styles-Objekt mit Stylesheet. Erstellen Sie auf diese
Weise und exportieren Sie standardmäßig auch die Auftragsposition.
Wie soll nun ein Bestellartikel aussehen?
Jetzt liegt es wie immer an Ihnen, aber ich werde hier mit einer Ansicht arbeiten. Meine Idee ist, dass ich immer den
Gesamtbetrag dieser Bestellung und das Datum und dann eine Schaltfläche zum Anzeigen von Details anzeigt, auf die wir drücken können, um die
einzelnen Artikel anzuzeigen Dies ist Teil der Bestellung. Für diese Artikel verwende ich hier tatsächlich die Warenkorb-Artikelkomponente,
da ich genau die Artikel rendern möchte, die ich in einem Warenkorb anzeige.
Also werde ich den Warenkorbartikel tatsächlich aus der Warenkorbartikelkomponente importieren und diese Komponente hier wiederverwenden.
Nun zurück zu diesem
jsx-Code, sodass wir eine Wrap-Ansicht um unser gesamtes Bestellobjekt haben, unseren gesamten Bestelleintrag hier.
Jetzt dort möchte ich eine erste Zeile haben und daher werde ich eine
andere Ansicht verwenden, damit wir diese entsprechend formatieren können, die einen Text enthalten sollte, der unsere Gesamtsumme anzeigt, also die Summe dieser Reihenfolge, sagen
wir, und einen anderen Text, in dem ich zeige Das Datum und dies sollten in derselben Zeile mit Leerzeichen dazwischen sein.
Wie ich bereits erwähnte, sollte sich unter ihnen eine Schaltfläche befinden, die wir drücken können, um die Details anzuzeigen, die dann alle
Artikel anzeigen, die Teil dieser Bestellung sind. Mit dieser Einstellung ist
es natürlich klar, dass der Betrag hier mit Hilfe von Requisiten erhalten werden sollte.
Dort erwarte ich also eine Menge Requisite und rufe Fix 2 an, um die entsprechende Anzahl von
Dezimalstellen auszugeben. Nun zum Datum
möchte ich hier das Requisitendatum ausgeben, damit wir ein Datum haben, das wir ausgeben können. Für das Styling möchte ich hier insgesamt eine Stilzuweisung für Bestellartikel
haben, damit wir die gesamte Bestellung stylen können, und dann müssen wir, wie sagen wir, eine
Zusammenfassung der Stile, damit wir diese Zeile stylen können, und in
Bezug auf den Text hier sollte dies so sein Ein Stil von sagen wir Gesamtmenge, da diese Stilkennungen immer bei Ihnen
liegen, hier
möchte ich einen Datumsstil haben.
Die Schaltfläche sollte auch eine eigene Farbe erhalten, die ich aus der Farbkonstante erhalte. Daher muss dieser Import
hinzugefügt werden, und
dort verwende ich meine Primärfarbe. Okay, das war's erstmal. Ich
werde gleich
auf die Details zurückkommen. Jetzt
wenden wir hier ein Styling an, damit wir etwas sehen können. Für den Bestellartikel selbst werde ich den Warenkorb-Look,
den ich bereits im Produktartikel habe, wiederverwenden. Daher kopiere ich alle diese Einstellungen hier aus dem
Produktartikel und verschiebe sie auf den Bestellartikel, sodass ein
Schatten angewendet wird , eine Hintergrundfarbe, ein Randradius, all das sollte angewendet werden.
Außerdem füge ich einen Rand von 20 in alle Richtungen hinzu, damit jeder Bestellartikel einen gewissen Abstand hat.
Innerhalb des Bestellartikels möchte ich auch einen Abstand von 10 haben, damit der Inhalt dort nicht
direkt an den Rändern des umgebenden Rahmens sitzt und so weiter. Nun zu der Zusammenfassung, die diese Ansicht ist, die
die beiden Textstücke enthält, sollte das Styling tatsächlich
so sein, dass wir natürlich eine Flexrichtung der Reihe haben, da
die Elemente nebeneinander sitzen sollten. Stellen Sie sicher, dass
der Inhalt ein Zwischenraum ist, und außerdem sollten die Ausrichtungselemente zentriert sein, sodass die Elemente auf der Querachse, die
hier die vertikale Achse ist, zentriert sind.
Ich möchte auch sicherstellen, dass wir hier die volle verfügbare Breite verwenden, um den Text zu verteilen. Nun, für den Gesamtbetrag, der das Styling
ist, das auf dieses erste Textstück angewendet wird, das den Betrag ausgibt, können Sie ihn wie immer nach Belieben stylen,
aber ich werde eine Schriftfamilie von Open Sans ohne Fettdruck festlegen, um diese fettgedruckte
Version meiner Schriftart und zu verwenden Geben Sie eine Schriftgröße von 16 an, sagen wir, und für das Datum, das mein
Stil ist, den ich hier auf diesen Datumstext angewendet
habe, möchte ich am Ende auch eine Schriftgröße von 16 verwenden, aber die Schriftfamilie ist nur ohne
geöffnet die
fette Version und außerdem können wir diese dunkelgraue Farbe hier auch wiederverwenden. Probieren Sie es jetzt aus und verwenden
Sie diesen Bestellartikel im Bestellbildschirm.
Dort müssen wir also zuerst den Bestellartikel importieren und dann natürlich in
den Komponentenordner, dort in den Shop-Ordner und dann den Bestellartikel aus dieser Bestellartendatei
importieren. Statt diesen
Text zu rendern, rendern wir jetzt Diese Bestellposition hier als selbstschließendes Tag und natürlich
müssen wir dies konfigurieren.
Dies erfordert, dass wir den Betrag und das Datum und später auch die Detailartikel eingeben, also die Artikel in
der Bestellung, aber
das wird in einem zweiten Schritt kommen.
Im Moment müssen wir hier also den Betrag übergeben, und das ist natürlich einfach itemData. Artikel, bei dem es sich um eine einzelne Bestellung handelt. Vergessen Sie
nicht, dass
wir hier alle Bestellungen durchlaufen, bei denen es sich um eine Reihe
von Bestellungen handelt. Dies
ist also eine einzelne Bestellung. Dort wird der Betrag, wenn wir uns unser Bestellmodell ansehen, in a gespeichert Gesamtbetrag Feld,
Datum wird dann im Datumsfeld gespeichert.
Hier greifen wir also auf das Feld Gesamtbetrag zu und für die Datumsangabe, die wir ebenfalls übergeben müssen,
können wir auf itemData zugreifen. Artikel. Datum. Wenn wir dies
jetzt speichern und uns das ansehen, fügen wir hier einige Inhalte hinzu, bestellen diese und gehen dann zu unserem Bestellbildschirm, und wir erhalten diesen Fehler.
Dies bezieht sich nun auf Objekte, die nicht so gültig sind, wie React es sollte, und zeigt
uns, dass es sich letztendlich um das Statusobjekt handelt, mit dem es ein Problem hat, und dass dies sinnvoll ist, da das Datum in
unserer Bestellung, wenn wir es hier in unserem Redux-Speicher erstellen, ein Datums-Javascript ist Objekt.
Jetzt können wir dies nicht als solchen Text ausgeben. Um es auszugeben, können wir
hier zu unserem Modell gehen, das am Ende die Blaupause ist, die wir zum Erstellen
der Aufträge verwenden, und im Auftragsmodell können wir etwas tun, was wir vorher noch nicht getan haben, wir können
dem eine Methode hinzufügen Modell oder genauer gesagt ein Getter, der eine Standard-Javascript-Funktion des modernen Javascript ist.
Hier können wir also das Schlüsselwort get und dann einen beliebigen Namen Ihrer Wahl verwenden, z. B. ein
lesbares Datum, das einer Funktion ähnelt, aber keine Funktion, die Sie wie eine Funktion aufrufen, auf
die Sie jedoch wie eine Eigenschaft am Ende zugreifen, die einen berechneten Wert zurückgibt Ich möchte dieses Datum zurückgeben, also
das Datumsobjekt, das für dieses Objekt gespeichert ist, aber dann können wir die Gebietsschema-Datumszeichenfolge aufrufen, eine integrierte Javascript-Methode, die wir für Datumsobjekte verwenden können, um
dieses Objekt in ein für Menschen lesbares Datum zu konvertieren. Dort übergeben wir beispielsweise die Sprache, für
die wir sie optimieren möchten, und können dies nun mit einem zweiten
Argument konfigurieren, das ein Javascript-Objekt ist. Dort können Sie festlegen, wie das
Jahr konfiguriert und angehängt werden soll. Sie finden die detaillierten Dokumente
für diese Methode, wenn Sie alles darüber erfahren möchten. Beispielsweise können wir das Jahr auf numerisch, den Monat
auf lang, den Tag auf numerisch setzen. die Stunde auf zwei Ziffern und die Minute auch auf zwei Ziffern.
Jetzt haben wir diese lesbare Datumseigenschaft, auf die wir für jede Bestellposition zugreifen können, und
dort im Bestellbildschirm, anstatt das Datenobjekt wie dieses zu übergeben, greife ich auf das lesbare Datum zu,
das jetzt diese neue Getter-Eigenschaft ist, die wir hinzugefügt haben, und jetzt was Sie werden sehen, dass wenn ich
diese Bestellung hier erneut aufgebe, indem ich auf "Jetzt bestellen" klicke und jetzt zu meinen Bestellungen gehe, Sie jetzt den Gesamtbetrag und
dieses sauber formatierte Datum sehen und jetzt, wenn ich dasselbe auf Android mache und eine Bestellung aufgeben hier und
ich gehe zu meinem Bestellbildschirm, dort sehen Sie dasselbe. Jetzt möchte ich diesen Button nur ein wenig optimieren, im Allgemeinen
auch unter iOS, er sollte hier nicht so breit sein, nicht so breit. In der Auftragselementkomponente, in der ich diese Schaltfläche habe, können wir am
Ende in dieser Ansicht hier Elemente ausrichten, um den Inhalt entlang der Querachse zu zentrieren, die von links nach rechts verläuft, und daher jetzt, wenn ich es versuche dies noch einmal und ich gebe diese Bestellung auf
und ich gehe zu Bestellungen, Sie sehen, dass dies jetzt dort nicht drückbar ist und es auf Android noch deutlicher ist,
wenn wir es dort neu laden und ich diese Bestellung ganz schnell hier
aufgeben, gehen Sie zum Bestellbildschirm, jetzt haben wir diese Schaltfläche. Das Ziel ist natürlich, dass diese Reihenfolge
hier erweitert wird, wenn wir diesen Knopf drücken. Was Sie auf Android übrigens bemerken werden, ist, dass dieses
Datum nicht korrekt angezeigt wird. Das
ist also eine andere Sache, die wir beheben müssen.
Der Grund dafür, dass dies nicht richtig angezeigt wird, ist, wie React Native
intern funktioniert. Welche Javascript-Engine es intern verwendet und welche für Android dort oder auf Android-Plattformen verwendet
wird, unterstützt diese nette Datumszeichenfolgenmethode, die ich hier verwende, einfach nicht .
Die auf iOS verwendete Engine funktioniert zwar, aber
auf Android ist dies nicht der Fall, was natürlich unpraktisch und nicht so toll ist.
Was können wir also auf Android tun, um dies zu beheben?
Die Lösung besteht darin, eine separate Bibliothek zu installieren, die als Moment bezeichnet wird. js, wir haben mit npm install installiert -
Moment speichern.
Dies ist eine Bibliothek von Drittanbietern, die auf
beiden Plattformen funktioniert, wodurch das Formatieren von Daten ebenfalls sehr einfach ist.
Warten wir also, bis diese Installation abgeschlossen ist.
Jetzt, da dies installiert ist, importieren Sie alles als Moment von Moment zu Moment und aus der Bibliothek, die Sie gerade installiert haben,
und jetzt können Sie es hier in dieser Datei verwenden.
Jetzt können wir dies hier unten auskommentieren und stattdessen den Moment zurückgeben, der wie eine Funktion ausgeführt wird, und diesen
übergeben. Datum,
also das Datumsobjekt, das wir formatieren und aufrufen möchten. Jetzt nimmt format eine Zeichenfolge, in der Sie konfigurieren können, wie diese formatiert und angehängt
werden soll. Außerdem finden Sie einen Link zu den offiziellen Dokumenten, in denen Sie alles
über die Möglichkeiten erfahren, die Sie dort haben.
Hier ein Beispiel, eine Möglichkeit, dies zu formatieren, sagen wir einen langen Monat, den Sie mit 4 Großbuchstaben
Ms machen, dann das o, um ein schön formatiertes Datum in diesem Monat zu haben, Tag für Monat, ein
Jahr, das durch vier Ziffern und dargestellt wird dann eine Stunde immer mit zwei Ziffern und den Minuten dargestellt und jetzt, wenn wir dies speichern
und es versuchen, starten Sie
auf iOS, fügen Sie dies hier in den Warenkorb, gehen Sie in den Warenkorb und bestellen Sie dies und gehen Sie jetzt
zu Bestellungen, das sieht
aus gut.
Und jetzt, wenn wir dies auch auf Android ausprobieren, bestellen wir
das und dann gehen wir zu Bestellungen, das sieht jetzt auch dort gut aus.
Nun, das ist eine kleine Korrektur. Lassen Sie uns nun
an der Schaltfläche arbeiten und ihr neben der Verkleinerung auch einen gewissen Abstand geben. Gehen Sie dazu zu der Zusammenfassung
hier, die der Stil ist, der auf die Ansicht angewendet wird, in der sich die beiden
Textstücke befinden Wir können einfach einen Rand am unteren Rand von 15 hinzufügen, so dass wir einen gewissen Abstand zwischen dieser
Zusammenfassungszeile, die diese Textzeile oben ist, und der Schaltfläche darunter haben. Also werde ich das hier in meinen Warenkorb legen, bestellen, dann zurückgehen, zu Bestellungen gehen, jetzt
sieht das gut aus.
Stellen wir nun sicher, dass
die Schaltfläche Details anzeigen auch etwas bewirkt.