1 00:00:02,160 --> 00:00:07,040 Lassen Sie uns jetzt am Bestellbildschirm arbeiten und mehr als nur diesen langweiligen Text ausgeben. 2 00:00:07,040 --> 00:00:12,390 Genau wie beim Warenkorbbildschirm und beim Produktübersichtsbild möchte ich jetzt eine komplexere 3 00:00:12,390 --> 00:00:17,970 Bestellposition und erstelle daher eine separate Bestellartikelkomponente im Komponentenordner und dort in einem Shopordner. 4 00:00:18,000 --> 00:00:20,550 Wie immer liegt es an Ihnen, ob Sie 5 00:00:20,550 --> 00:00:26,420 das auch tun, aber da dies keine sehr kleine Komponente ist, bevorzuge ich es, sie in einer separaten Datei zu haben. 6 00:00:26,550 --> 00:00:32,880 Also werde ich React from React hier importieren und natürlich einige Dinge aus React Native importieren, und das wäre 7 00:00:32,880 --> 00:00:39,660 die Ansicht, der Text, das Stylesheet, da wir sicherlich auch einige Stile einrichten werden und auch eine Schaltfläche, weil ich auch 8 00:00:39,990 --> 00:00:47,100 Sie möchten in der Lage sein, eine Bestellung so zu erweitern, dass nicht immer alle Artikel angezeigt werden, die Teil der Bestellung 9 00:00:47,100 --> 00:00:54,200 sind, sondern dass wir sie anzeigen können, wenn wir möchten. Jetzt können wir hier unsere Bestellartikelkonstante erstellen, so 10 00:00:54,290 --> 00:01:00,710 dass die Komponente selbst Requisiten empfängt und am Ende ihren Körper hier hat und etwas 11 00:01:00,740 --> 00:01:08,460 jsx-Code zurückgibt. Hier benötigen wir ein Styles-Objekt mit Stylesheet. Erstellen Sie auf diese 12 00:01:08,520 --> 00:01:13,990 Weise und exportieren Sie standardmäßig auch die Auftragsposition. 13 00:01:14,070 --> 00:01:16,460 Wie soll nun ein Bestellartikel aussehen? 14 00:01:16,470 --> 00:01:23,280 Jetzt liegt es wie immer an Ihnen, aber ich werde hier mit einer Ansicht arbeiten. Meine Idee ist, dass ich immer den 15 00:01:23,280 --> 00:01:29,880 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 16 00:01:29,880 --> 00:01:35,130 einzelnen Artikel anzuzeigen Dies ist Teil der Bestellung. Für diese Artikel verwende ich hier tatsächlich die Warenkorb-Artikelkomponente, 17 00:01:35,130 --> 00:01:39,620 da ich genau die Artikel rendern möchte, die ich in einem Warenkorb anzeige. 18 00:01:39,690 --> 00:01:46,190 Also werde ich den Warenkorbartikel tatsächlich aus der Warenkorbartikelkomponente importieren und diese Komponente hier wiederverwenden. 19 00:01:46,380 --> 00:01:48,400 Nun zurück zu diesem 20 00:01:48,540 --> 00:01:54,110 jsx-Code, sodass wir eine Wrap-Ansicht um unser gesamtes Bestellobjekt haben, unseren gesamten Bestelleintrag hier. 21 00:01:54,270 --> 00:01:58,980 Jetzt dort möchte ich eine erste Zeile haben und daher werde ich eine 22 00:01:58,980 --> 00:02:06,660 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 23 00:02:06,660 --> 00:02:13,470 wir, und einen anderen Text, in dem ich zeige Das Datum und dies sollten in derselben Zeile mit Leerzeichen dazwischen sein. 24 00:02:14,370 --> 00:02:20,660 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 25 00:02:20,660 --> 00:02:25,440 Artikel anzeigen, die Teil dieser Bestellung sind. Mit dieser Einstellung ist 26 00:02:25,470 --> 00:02:32,040 es natürlich klar, dass der Betrag hier mit Hilfe von Requisiten erhalten werden sollte. 27 00:02:32,040 --> 00:02:38,100 Dort erwarte ich also eine Menge Requisite und rufe Fix 2 an, um die entsprechende Anzahl von 28 00:02:38,100 --> 00:02:40,350 Dezimalstellen auszugeben. Nun zum Datum 29 00:02:40,350 --> 00:02:49,360 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 30 00:02:49,380 --> 00:02:55,860 haben, damit wir die gesamte Bestellung stylen können, und dann müssen wir, wie sagen wir, eine 31 00:02:55,860 --> 00:03:00,380 Zusammenfassung der Stile, damit wir diese Zeile stylen können, und in 32 00:03:00,450 --> 00:03:09,240 Bezug auf den Text hier sollte dies so sein Ein Stil von sagen wir Gesamtmenge, da diese Stilkennungen immer bei Ihnen 33 00:03:09,300 --> 00:03:10,290 liegen, hier 34 00:03:10,290 --> 00:03:12,720 möchte ich einen Datumsstil haben. 35 00:03:16,000 --> 00:03:21,640 Die Schaltfläche sollte auch eine eigene Farbe erhalten, die ich aus der Farbkonstante erhalte. Daher muss dieser Import 36 00:03:21,640 --> 00:03:22,830 hinzugefügt werden, und 37 00:03:22,840 --> 00:03:26,130 dort verwende ich meine Primärfarbe. Okay, das war's erstmal. Ich 38 00:03:26,610 --> 00:03:27,430 werde gleich 39 00:03:27,450 --> 00:03:29,160 auf die Details zurückkommen. Jetzt 40 00:03:29,160 --> 00:03:36,380 wenden wir hier ein Styling an, damit wir etwas sehen können. Für den Bestellartikel selbst werde ich den Warenkorb-Look, 41 00:03:36,480 --> 00:03:43,050 den ich bereits im Produktartikel habe, wiederverwenden. Daher kopiere ich alle diese Einstellungen hier aus dem 42 00:03:43,050 --> 00:03:46,770 Produktartikel und verschiebe sie auf den Bestellartikel, sodass ein 43 00:03:46,770 --> 00:03:51,770 Schatten angewendet wird , eine Hintergrundfarbe, ein Randradius, all das sollte angewendet werden. 44 00:03:52,010 --> 00:03:57,210 Außerdem füge ich einen Rand von 20 in alle Richtungen hinzu, damit jeder Bestellartikel einen gewissen Abstand hat. 45 00:03:58,790 --> 00:04:03,830 Innerhalb des Bestellartikels möchte ich auch einen Abstand von 10 haben, damit der Inhalt dort nicht 46 00:04:03,830 --> 00:04:10,800 direkt an den Rändern des umgebenden Rahmens sitzt und so weiter. Nun zu der Zusammenfassung, die diese Ansicht ist, die 47 00:04:10,800 --> 00:04:13,700 die beiden Textstücke enthält, sollte das Styling tatsächlich 48 00:04:13,770 --> 00:04:17,940 so sein, dass wir natürlich eine Flexrichtung der Reihe haben, da 49 00:04:17,940 --> 00:04:22,590 die Elemente nebeneinander sitzen sollten. Stellen Sie sicher, dass 50 00:04:22,590 --> 00:04:31,230 der Inhalt ein Zwischenraum ist, und außerdem sollten die Ausrichtungselemente zentriert sein, sodass die Elemente auf der Querachse, die 51 00:04:31,230 --> 00:04:34,280 hier die vertikale Achse ist, zentriert sind. 52 00:04:34,290 --> 00:04:40,160 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 53 00:04:40,180 --> 00:04:47,620 ist, das auf dieses erste Textstück angewendet wird, das den Betrag ausgibt, können Sie ihn wie immer nach Belieben stylen, 54 00:04:47,830 --> 00:04:53,350 aber ich werde eine Schriftfamilie von Open Sans ohne Fettdruck festlegen, um diese fettgedruckte 55 00:04:53,350 --> 00:05:01,180 Version meiner Schriftart und zu verwenden Geben Sie eine Schriftgröße von 16 an, sagen wir, und für das Datum, das mein 56 00:05:01,180 --> 00:05:04,630 Stil ist, den ich hier auf diesen Datumstext angewendet 57 00:05:04,630 --> 00:05:10,840 habe, möchte ich am Ende auch eine Schriftgröße von 16 verwenden, aber die Schriftfamilie ist nur ohne 58 00:05:10,840 --> 00:05:12,010 geöffnet die 59 00:05:12,040 --> 00:05:20,800 fette Version und außerdem können wir diese dunkelgraue Farbe hier auch wiederverwenden. Probieren Sie es jetzt aus und verwenden 60 00:05:20,810 --> 00:05:24,080 Sie diesen Bestellartikel im Bestellbildschirm. 61 00:05:24,080 --> 00:05:29,480 Dort müssen wir also zuerst den Bestellartikel importieren und dann natürlich in 62 00:05:29,480 --> 00:05:34,970 den Komponentenordner, dort in den Shop-Ordner und dann den Bestellartikel aus dieser Bestellartendatei 63 00:05:34,970 --> 00:05:36,520 importieren. Statt diesen 64 00:05:36,710 --> 00:05:42,800 Text zu rendern, rendern wir jetzt Diese Bestellposition hier als selbstschließendes Tag und natürlich 65 00:05:42,800 --> 00:05:44,710 müssen wir dies konfigurieren. 66 00:05:44,720 --> 00:05:50,780 Dies erfordert, dass wir den Betrag und das Datum und später auch die Detailartikel eingeben, also die Artikel in 67 00:05:50,780 --> 00:05:52,160 der Bestellung, aber 68 00:05:52,190 --> 00:05:54,400 das wird in einem zweiten Schritt kommen. 69 00:05:54,410 --> 00:06:02,120 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 70 00:06:02,120 --> 00:06:03,290 nicht, dass 71 00:06:03,290 --> 00:06:07,020 wir hier alle Bestellungen durchlaufen, bei denen es sich um eine Reihe 72 00:06:07,040 --> 00:06:08,260 von Bestellungen handelt. Dies 73 00:06:08,720 --> 00:06:15,030 ist also eine einzelne Bestellung. Dort wird der Betrag, wenn wir uns unser Bestellmodell ansehen, in a gespeichert Gesamtbetrag Feld, 74 00:06:15,030 --> 00:06:16,830 Datum wird dann im Datumsfeld gespeichert. 75 00:06:16,850 --> 00:06:21,980 Hier greifen wir also auf das Feld Gesamtbetrag zu und für die Datumsangabe, die wir ebenfalls übergeben müssen, 76 00:06:21,980 --> 00:06:28,070 können wir auf itemData zugreifen. Artikel. Datum. Wenn wir dies 77 00:06:28,070 --> 00:06:37,940 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. 78 00:06:38,030 --> 00:06:42,980 Dies bezieht sich nun auf Objekte, die nicht so gültig sind, wie React es sollte, und zeigt 79 00:06:42,980 --> 00:06:50,010 uns, dass es sich letztendlich um das Statusobjekt handelt, mit dem es ein Problem hat, und dass dies sinnvoll ist, da das Datum in 80 00:06:50,010 --> 00:06:54,540 unserer Bestellung, wenn wir es hier in unserem Redux-Speicher erstellen, ein Datums-Javascript ist Objekt. 81 00:06:54,650 --> 00:06:58,150 Jetzt können wir dies nicht als solchen Text ausgeben. Um es auszugeben, können wir 82 00:06:58,160 --> 00:07:03,230 hier zu unserem Modell gehen, das am Ende die Blaupause ist, die wir zum Erstellen 83 00:07:03,820 --> 00:07:09,830 der Aufträge verwenden, und im Auftragsmodell können wir etwas tun, was wir vorher noch nicht getan haben, wir können 84 00:07:10,070 --> 00:07:15,650 dem eine Methode hinzufügen Modell oder genauer gesagt ein Getter, der eine Standard-Javascript-Funktion des modernen Javascript ist. 85 00:07:15,650 --> 00:07:21,200 Hier können wir also das Schlüsselwort get und dann einen beliebigen Namen Ihrer Wahl verwenden, z. B. ein 86 00:07:21,200 --> 00:07:26,330 lesbares Datum, das einer Funktion ähnelt, aber keine Funktion, die Sie wie eine Funktion aufrufen, auf 87 00:07:26,330 --> 00:07:32,600 die Sie jedoch wie eine Eigenschaft am Ende zugreifen, die einen berechneten Wert zurückgibt Ich möchte dieses Datum zurückgeben, also 88 00:07:32,600 --> 00:07:40,100 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 89 00:07:40,130 --> 00:07:46,790 dieses Objekt in ein für Menschen lesbares Datum zu konvertieren. Dort übergeben wir beispielsweise die Sprache, für 90 00:07:46,790 --> 00:07:52,190 die wir sie optimieren möchten, und können dies nun mit einem zweiten 91 00:07:52,220 --> 00:07:58,100 Argument konfigurieren, das ein Javascript-Objekt ist. Dort können Sie festlegen, wie das 92 00:07:58,100 --> 00:08:03,260 Jahr konfiguriert und angehängt werden soll. Sie finden die detaillierten Dokumente 93 00:08:03,260 --> 00:08:11,020 für diese Methode, wenn Sie alles darüber erfahren möchten. Beispielsweise können wir das Jahr auf numerisch, den Monat 94 00:08:14,470 --> 00:08:22,980 auf lang, den Tag auf numerisch setzen. die Stunde auf zwei Ziffern und die Minute auch auf zwei Ziffern. 95 00:08:23,160 --> 00:08:28,650 Jetzt haben wir diese lesbare Datumseigenschaft, auf die wir für jede Bestellposition zugreifen können, und 96 00:08:29,190 --> 00:08:34,960 dort im Bestellbildschirm, anstatt das Datenobjekt wie dieses zu übergeben, greife ich auf das lesbare Datum zu, 97 00:08:35,010 --> 00:08:41,520 das jetzt diese neue Getter-Eigenschaft ist, die wir hinzugefügt haben, und jetzt was Sie werden sehen, dass wenn ich 98 00:08:41,520 --> 00:08:48,960 diese Bestellung hier erneut aufgebe, indem ich auf "Jetzt bestellen" klicke und jetzt zu meinen Bestellungen gehe, Sie jetzt den Gesamtbetrag und 99 00:08:48,960 --> 00:08:55,320 dieses sauber formatierte Datum sehen und jetzt, wenn ich dasselbe auf Android mache und eine Bestellung aufgeben hier und 100 00:08:55,320 --> 00:09:02,130 ich gehe zu meinem Bestellbildschirm, dort sehen Sie dasselbe. Jetzt möchte ich diesen Button nur ein wenig optimieren, im Allgemeinen 101 00:09:02,130 --> 00:09:09,840 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 102 00:09:09,840 --> 00:09:21,750 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 103 00:09:21,750 --> 00:09:28,550 und ich gehe zu Bestellungen, Sie sehen, dass dies jetzt dort nicht drückbar ist und es auf Android noch deutlicher ist, 104 00:09:28,550 --> 00:09:32,760 wenn wir es dort neu laden und ich diese Bestellung ganz schnell hier 105 00:09:35,950 --> 00:09:43,060 aufgeben, gehen Sie zum Bestellbildschirm, jetzt haben wir diese Schaltfläche. Das Ziel ist natürlich, dass diese Reihenfolge 106 00:09:43,060 --> 00:09:50,530 hier erweitert wird, wenn wir diesen Knopf drücken. Was Sie auf Android übrigens bemerken werden, ist, dass dieses 107 00:09:50,530 --> 00:09:53,460 Datum nicht korrekt angezeigt wird. Das 108 00:09:53,470 --> 00:09:56,970 ist also eine andere Sache, die wir beheben müssen. 109 00:09:57,050 --> 00:10:02,240 Der Grund dafür, dass dies nicht richtig angezeigt wird, ist, wie React Native 110 00:10:02,300 --> 00:10:08,810 intern funktioniert. Welche Javascript-Engine es intern verwendet und welche für Android dort oder auf Android-Plattformen verwendet 111 00:10:08,810 --> 00:10:13,980 wird, unterstützt diese nette Datumszeichenfolgenmethode, die ich hier verwende, einfach nicht . 112 00:10:14,180 --> 00:10:17,500 Die auf iOS verwendete Engine funktioniert zwar, aber 113 00:10:17,510 --> 00:10:23,030 auf Android ist dies nicht der Fall, was natürlich unpraktisch und nicht so toll ist. 114 00:10:23,030 --> 00:10:26,030 Was können wir also auf Android tun, um dies zu beheben? 115 00:10:26,030 --> 00:10:34,610 Die Lösung besteht darin, eine separate Bibliothek zu installieren, die als Moment bezeichnet wird. js, wir haben mit npm install installiert - 116 00:10:34,610 --> 00:10:36,440 Moment speichern. 117 00:10:36,740 --> 00:10:39,580 Dies ist eine Bibliothek von Drittanbietern, die auf 118 00:10:39,590 --> 00:10:43,830 beiden Plattformen funktioniert, wodurch das Formatieren von Daten ebenfalls sehr einfach ist. 119 00:10:44,420 --> 00:10:47,000 Warten wir also, bis diese Installation abgeschlossen ist. 120 00:10:47,090 --> 00:10:53,400 Jetzt, da dies installiert ist, importieren Sie alles als Moment von Moment zu Moment und aus der Bibliothek, die Sie gerade installiert haben, 121 00:10:53,570 --> 00:10:56,530 und jetzt können Sie es hier in dieser Datei verwenden. 122 00:10:56,540 --> 00:11:03,950 Jetzt können wir dies hier unten auskommentieren und stattdessen den Moment zurückgeben, der wie eine Funktion ausgeführt wird, und diesen 123 00:11:03,950 --> 00:11:05,030 übergeben. Datum, 124 00:11:05,050 --> 00:11:12,800 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 125 00:11:12,800 --> 00:11:16,880 werden soll. Außerdem finden Sie einen Link zu den offiziellen Dokumenten, in denen Sie alles 126 00:11:16,880 --> 00:11:19,330 über die Möglichkeiten erfahren, die Sie dort haben. 127 00:11:19,360 --> 00:11:26,760 Hier ein Beispiel, eine Möglichkeit, dies zu formatieren, sagen wir einen langen Monat, den Sie mit 4 Großbuchstaben 128 00:11:26,770 --> 00:11:34,570 Ms machen, dann das o, um ein schön formatiertes Datum in diesem Monat zu haben, Tag für Monat, ein 129 00:11:34,570 --> 00:11:44,730 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 130 00:11:45,180 --> 00:11:47,160 und es versuchen, starten Sie 131 00:11:47,180 --> 00:11:56,250 auf iOS, fügen Sie dies hier in den Warenkorb, gehen Sie in den Warenkorb und bestellen Sie dies und gehen Sie jetzt 132 00:11:56,250 --> 00:11:57,840 zu Bestellungen, das sieht 133 00:11:57,840 --> 00:11:58,870 aus gut. 134 00:11:59,040 --> 00:12:02,440 Und jetzt, wenn wir dies auch auf Android ausprobieren, bestellen wir 135 00:12:02,730 --> 00:12:06,860 das und dann gehen wir zu Bestellungen, das sieht jetzt auch dort gut aus. 136 00:12:06,960 --> 00:12:10,610 Nun, das ist eine kleine Korrektur. Lassen Sie uns nun 137 00:12:10,740 --> 00:12:17,220 an der Schaltfläche arbeiten und ihr neben der Verkleinerung auch einen gewissen Abstand geben. Gehen Sie dazu zu der Zusammenfassung 138 00:12:17,220 --> 00:12:22,260 hier, die der Stil ist, der auf die Ansicht angewendet wird, in der sich die beiden 139 00:12:22,260 --> 00:12:29,190 Textstücke befinden Wir können einfach einen Rand am unteren Rand von 15 hinzufügen, so dass wir einen gewissen Abstand zwischen dieser 140 00:12:29,190 --> 00:12:36,540 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 141 00:12:36,690 --> 00:12:37,750 sieht das gut aus. 142 00:12:37,770 --> 00:12:39,300 Stellen wir nun sicher, dass 143 00:12:39,300 --> 00:12:41,000 die Schaltfläche Details anzeigen auch etwas bewirkt.