1 00:00:02,210 --> 00:00:04,450 Weiter zu den Warenkorbartikeln. 2 00:00:04,730 --> 00:00:08,030 Jetzt werde ich wieder eine separate Komponente für jeden Warenkorbartikel erstellen, den 3 00:00:08,030 --> 00:00:09,240 ich hier ausgeben möchte. 4 00:00:09,260 --> 00:00:15,200 Ich könnte es hier tun, aber es wird wieder eine etwas längere Komponente sein und ich möchte diese Datei nicht 5 00:00:15,200 --> 00:00:19,500 damit aufblähen und ich werde sie später auch an einer anderen Stelle verwenden, was seltsam 6 00:00:19,610 --> 00:00:23,930 klingen könnte, da wir nur eine haben Ein Warenkorbbildschirm, aber Sie werden sehen, wo wir 7 00:00:23,930 --> 00:00:25,750 später einen Warenkorbartikel verwenden können. 8 00:00:25,760 --> 00:00:30,890 Gehen wir dazu zurück in den Komponentenordner und dort möglicherweise in den Shop-Ordner und fügen 9 00:00:30,920 --> 00:00:33,680 ein CartItem hinzu. js-Datei neben dem Produktartikel. 10 00:00:33,710 --> 00:00:37,480 Jetzt haben wir natürlich eine normale React-Komponente, sodass Sie das Spiel kennen und wissen, 11 00:00:37,490 --> 00:00:38,850 wie diese erstellt werden. 12 00:00:39,080 --> 00:00:44,630 Wir importieren React von React und da dies die Komponente ist, die etwas ausgeben soll, importieren wir 13 00:00:44,630 --> 00:00:50,170 eine Reihe von Komponenten von React Native, den Kernprimitiven, mit denen wir die Benutzeroberfläche erstellt haben. 14 00:00:50,300 --> 00:00:57,990 Ich brauche eine Ansicht, ich brauche einen Text, ich brauche hier sicher ein Stylesheet und dann füge ich hier meine Konstante hinzu, 15 00:00:57,990 --> 00:01:06,210 Warenkorbartikel, der Requisiten erhält, und am Ende hier etwas jsx-Code zurückgeben. Ich werde mein Styles-Objekt 16 00:01:06,210 --> 00:01:09,340 hier mit Stylesheet 17 00:01:09,480 --> 00:01:16,050 erstellen hinzufügen und dieses als Standard-Warenkorbelement exportieren. 18 00:01:16,170 --> 00:01:21,540 Nun liegt der JSX-Code, der hier zurückgegeben werden soll, natürlich immer bei Ihnen, aber ich 19 00:01:21,540 --> 00:01:28,070 werde hier eine Ansicht haben und in dieser Ansicht möchte ich natürlich die Menge und den Titel ausgeben, auch den 20 00:01:28,290 --> 00:01:34,080 Gesamtbetrag für diesen Warenkorbartikel Wir haben mehr als einen hinzugefügt, dann ist dies nicht nur der Preis 21 00:01:34,080 --> 00:01:39,780 eines einzelnen Artikels, sondern natürlich Preis mal Menge, und ich möchte auch eine Schaltfläche haben, mit der 22 00:01:39,780 --> 00:01:41,730 ich diesen Artikel aus dem Warenkorb 23 00:01:41,730 --> 00:01:43,460 löschen kann, ein Papierkorbsymbol. 24 00:01:44,070 --> 00:01:53,180 Am Ende werde ich hier eine Zeile mit einem Text haben und dieser Text wird die Menge und den Titel 25 00:01:53,420 --> 00:02:02,850 haben, also werde ich dort die Menge und den Titel haben und eigentlich sollte dies anders gestaltet sein, also werde ich 26 00:02:02,850 --> 00:02:09,540 das umbrechen Menge hier in einen separaten Textknoten und mache dasselbe für den Titel, 27 00:02:10,650 --> 00:02:21,600 so dass ich hier am Ende zwei separate Textknoten habe und dann nach diesem Textblock hier eine Ansicht sein sollte, um zwei andere Elemente 28 00:02:21,600 --> 00:02:28,060 zu gruppieren, ein weiteres Stück von Text, der hier den Gesamtbetrag für diesen 29 00:02:28,110 --> 00:02:35,280 Artikel darstellt, also Betrag und daneben eine Schaltfläche oder eigentlich keine Schaltfläche, sondern ein drückbares Symbol. 30 00:02:35,280 --> 00:02:40,740 Also werde ich mein eigenes berührbares Ding mit berührbarer Deckkraft erstellen und natürlich könnten 31 00:02:40,740 --> 00:02:46,650 Sie diese Plattformdifferenzierung erneut für den Welligkeitseffekt durchführen, aber ich werde hier auf beiden Plattformen mit 32 00:02:47,370 --> 00:02:54,090 Deckkraft arbeiten und Ionicons von @ expo / vector-icons importieren was wir bereits früher hinzugefügt haben, weil ich 33 00:02:54,090 --> 00:02:55,110 hier nur 34 00:02:55,110 --> 00:03:00,480 ein Symbol haben möchte, auf das wir drücken können, also möchte ich hier eine 35 00:03:00,470 --> 00:03:07,040 berührbare Deckkraft haben und diese um ein Symbol wickeln, das wir mit Ionicons hinzufügen können, wie Sie 36 00:03:07,100 --> 00:03:13,340 zuvor in diesem Kurs hinzugefügt haben, mit diesem als Eine Komponente verwendet hier und da einfach einen 37 00:03:13,340 --> 00:03:19,190 Namen, der sich je nach Plattform unterscheiden sollte, da der Name die Symbolkennung ist. Dort 38 00:03:19,190 --> 00:03:29,670 können wir das Betriebssystem der Plattform überprüfen. Wenn dies Android ist, hat das zu verwendende Symbol den Namen md trash und ansonsten wird es iOS-Papierkorb sein, der ein 39 00:03:29,670 --> 00:03:37,410 schönes Papierkorbsymbol rendert, und wir können diesem Symbol auch eine Größe von sagen wir 23 geben, die wieder ganz schön und 40 00:03:37,410 --> 00:03:43,890 farbig aussehen sollte, und hier werde ich tatsächlich Rot verwenden, weil es dies entfernt Artikel so sollte 41 00:03:43,890 --> 00:03:52,490 es wie ein Warni haben ng Farbe würde ich sagen. Berührbare Deckkraft beim Drücken sollte etwas bewirken und das Presseereignis an die Komponente 42 00:03:52,490 --> 00:03:54,520 weiterleiten, die die Warenkorbartikelkomponente verwendet. 43 00:03:54,520 --> 00:04:00,460 Ich erwarte daher, dass Sie eine Stütze zum Entfernen erhalten. Dieser Name liegt wie immer bei Ihnen und 44 00:04:00,460 --> 00:04:11,170 enthält eine Funktion, die in der enthalten ist Ende dann ausgeführt und wir können hier auch einen Stil hinzufügen, sehr einfachen Stil, wo ich zum Beispiel auf die Schaltfläche Löschen zeige und 45 00:04:11,170 --> 00:04:14,360 das ist eine Stildeklaration, die wir danach hinzufügen können. 46 00:04:14,380 --> 00:04:17,120 Apropos Stile, es gibt natürlich weitere Stile, 47 00:04:17,260 --> 00:04:22,420 die hinzugefügt werden müssen, zum Beispiel in der obersten Ansicht hier. Ich gebe 48 00:04:22,420 --> 00:04:25,390 diesem einen Artikelstil für den Warenkorb. Dieser 49 00:04:27,910 --> 00:04:29,410 Text hier erhält 50 00:04:29,410 --> 00:04:37,060 dann möglicherweise einen Stil für Artikeldaten. Dieser Text mit der Menge kann einen Stil erhalten, den wir Stile benennen können. Quantität, wieder liegen all 51 00:04:37,060 --> 00:04:40,720 diese Stilkennungen wie immer ganz bei Ihnen. 52 00:04:41,020 --> 00:04:43,600 Hier auf dem Titel habe ich 53 00:04:44,970 --> 00:04:53,970 einen Titelstil und dann hier in dieser Ansicht werde ich wieder einen Stil von Artikeldaten hinzufügen, also werde ich diesen Stil wiederverwenden, weil ich 54 00:04:53,970 --> 00:05:05,760 das gleiche hier einrichten möchte und dieser Betrag hier wird auch einen Stil der Menge bekommen. Um eine Reihe von Stilen hinzuzufügen, gehen wir zum 55 00:05:05,760 --> 00:05:09,230 Stylesheet und fügen dort den 56 00:05:09,450 --> 00:05:13,640 Warenkorbartikel hinzu, der unser Stammstil ist, 57 00:05:13,970 --> 00:05:16,620 dann Artikeldaten und 58 00:05:16,850 --> 00:05:18,500 -menge, also 59 00:05:20,780 --> 00:05:21,890 Artikeldatenmenge, 60 00:05:23,500 --> 00:05:33,140 dann den Titel hier und die Menge und nicht zuletzt Zumindest die Schaltfläche Löschen. 61 00:05:33,140 --> 00:05:38,490 Das müssen wir hier auch hinzufügen. Nun, auf der Schaltfläche "Löschen" ist das 62 00:05:38,500 --> 00:05:39,100 ganz 63 00:05:39,100 --> 00:05:46,930 einfach. Ich füge links von 20 einen Rand hinzu, um einen gewissen Abstand zwischen dem Symbol und dem daneben liegenden Text 64 00:05:46,930 --> 00:05:52,070 zu erhalten. Gehen wir damit zum Warenkorb. 65 00:05:52,110 --> 00:05:57,010 Dort möchte ich eine Polsterung von 10 haben, eine Hintergrundfarbe von Weiß. Ich werde meinen Kartenlook hier 66 00:05:57,010 --> 00:06:01,930 nicht verwenden. Ich werde hier keinen Schatten hinzufügen. Sie könnten das tun, aber ich bevorzuge einen anderen 67 00:06:01,930 --> 00:06:02,420 Look. 68 00:06:02,560 --> 00:06:06,700 Wichtig ist die Flex-Richtungszeile, damit alle Elemente in dieser Ansicht angezeigt werden, sodass dieser 69 00:06:06,700 --> 00:06:13,330 Text und diese Ansicht in ein und derselben Zeile nebeneinander liegen. Begründen Sie, dass der Inhalt ein 70 00:06:13,330 --> 00:06:21,720 Leerzeichen zwischen diesen beiden Inhaltsblöcken sein sollte, und ich werde auch einen Rand in horizontaler Richtung von 71 00:06:22,380 --> 00:06:24,660 20 hinzufügen, damit links 72 00:06:24,880 --> 00:06:29,250 und rechts um meine Warenkorbartikel ein gewisser Abstand besteht. 73 00:06:29,880 --> 00:06:36,000 Nun, Artikeldaten, das ist der Stil, den wir um Menge, Titel und Menge und die 74 00:06:36,630 --> 00:06:46,360 Schaltfläche "Löschen" wiederholen. Artikeldaten sollten eine Zeile mit flexibler Richtung haben, um sicherzustellen, dass die Artikel dort in einer Reihe positioniert sind, und ich werde 75 00:06:46,360 --> 00:06:55,370 hier Elemente ausrichten zentrieren, um den gesamten Inhalt vertikal zu zentrieren. Für die Menge hier möchte ich eine Schriftfamilie von 76 00:06:55,370 --> 00:07:05,440 Open-Sans festlegen. Übrigens können wir hier auch eine Ansicht anstelle eines Textes um diese beiden Textknoten verwenden, da ich hier keine textspezifischen 77 00:07:05,440 --> 00:07:10,220 Stile einstelle Lassen Sie uns stattdessen einen Blick darauf werfen, 78 00:07:10,360 --> 00:07:15,430 aber damit zurück zur Menge. Wir können diesem eine Schriftfamilie 79 00:07:15,430 --> 00:07:22,240 von Open-Sans geben, eine Farbe von vielleicht dieser dunkelgrauen Farbe, die wir zuvor für Preise verwendet 80 00:07:22,240 --> 00:07:27,820 haben, jetzt für die Menge und eine Schriftgröße von 16 vielleicht und dann 81 00:07:27,820 --> 00:07:35,740 hier für den Titel, werde ich eine setzen Schriftfamilie von Open Sans ohne Fettdruck, um dies fett zu machen, 82 00:07:35,740 --> 00:07:43,760 geben Sie dies auch eine Schriftgröße von 16 und auf die Menge hier werde ich genau das gleiche tun. 83 00:07:46,090 --> 00:07:52,960 Daher könnten wir dies natürlich auch zu ein und demselben Stil zusammenführen, vielleicht diesen Haupttext oder ähnliches benennen, 84 00:07:52,960 --> 00:07:53,820 den 85 00:07:53,830 --> 00:08:00,010 Betrag loswerden, da wir genau dieselben Stildefinitionen haben und jetzt den Haupttext hier anstelle des Titels 86 00:08:00,010 --> 00:08:02,350 und hier stattdessen verwenden der Menge. 87 00:08:05,070 --> 00:08:05,710 Okay. 88 00:08:05,730 --> 00:08:06,840 Dies ist 89 00:08:06,840 --> 00:08:08,900 ein Warenkorbartikel. Lassen Sie uns ihn 90 00:08:08,970 --> 00:08:11,040 jetzt mithilfe einer flachen Liste auf 91 00:08:11,280 --> 00:08:16,080 dem Warenkorbbildschirm verwenden, da wir dort derzeit keine Artikel auf dem Warenkorbbildschirm ausgeben. 92 00:08:16,380 --> 00:08:19,740 Diese Ansicht hier kann jetzt durch eine flache Liste 93 00:08:19,740 --> 00:08:27,080 ersetzt werden, und die Daten, die wir dort speichern, sollten eine Reihe von Warenkorbartikeln enthalten. Genau das haben wir hier 94 00:08:27,080 --> 00:08:29,030 in der Konstante für 95 00:08:29,150 --> 00:08:31,700 Warenkorbartikel. Lassen Sie uns dies hier verwenden. 96 00:08:31,700 --> 00:08:32,240 Jetzt 97 00:08:32,240 --> 00:08:37,550 füge ich hier auch einen Schlüsselextraktor hinzu, und hier müssen Sie ihn unbedingt hinzufügen, damit React Native 98 00:08:37,550 --> 00:08:43,100 weiß, wo sich Ihr Schlüssel befindet, da jedes Element hier am Ende dieses Formats hat und weder einen Schlüssel 99 00:08:43,190 --> 00:08:48,650 noch einen hat ID-Eigenschaft, aber wir wissen, dass die Produkt-ID als Schlüssel verwendet werden kann, da diese für 100 00:08:48,650 --> 00:08:49,910 jeden Artikel eindeutig ist. 101 00:08:49,910 --> 00:08:54,920 Also hier zeige ich auf Punkt. productId am Ende und jetzt zum 102 00:08:54,920 --> 00:09:00,030 Rendern von Artikeln möchte ich diesen Warenkorbartikel verwenden, den wir gerade hinzugefügt haben. 103 00:09:00,140 --> 00:09:10,400 Hier müssen wir also den Warenkorbartikel aus dem Komponentenordner, dem Shopordner und dort dem Warenkorbartikel importieren und diese Warenkorbartikelkomponente dort 104 00:09:11,060 --> 00:09:17,850 unten in unserer Renderfunktion verwenden, wo wir am Ende unsere Artikeldaten erhalten und 105 00:09:17,850 --> 00:09:26,040 dann unsere zurückgeben Warenkorbartikel wie dieser und jetzt auf dem Warenkorbartikel müssen wir einige Daten übergeben, 106 00:09:26,040 --> 00:09:28,240 oder? Im Warenkorbartikel habe 107 00:09:28,250 --> 00:09:34,350 ich momentan Dummy-Platzhalter. Natürlich erwarte ich hier, dass ich meine Menge auf eine Requisite mit dem Namen "Menge" bekomme. Ich 108 00:09:34,350 --> 00:09:42,080 erwarte, dass ich meinen Titel auf eine Requisite mit dem Namen "Titel" und die Menge auf eine Requisite mit dem Namen "Menge" bekomme Dort werde ich 109 00:09:42,090 --> 00:09:47,640 auf fest auf 2 aufrufen, um sicherzustellen, dass wir dort immer zwei Dezimalstellen haben und wir haben auch die 110 00:09:47,660 --> 00:09:49,910 Stütze zum Entfernen, die wir richtig erwarten. 111 00:09:49,920 --> 00:09:53,830 Also haben wir Menge, Titel, Menge und beim Entfernen, also zurück im Warenkorbbildschirm, das 112 00:09:53,830 --> 00:10:01,780 müssen wir hinzufügen, die Menge ist natürlich itemData. Artikel. Menge, weil ein einzelner 113 00:10:01,780 --> 00:10:06,740 Artikel hier natürlich ein solcher Artikel ist und wir 114 00:10:06,940 --> 00:10:15,180 daher eine Menge behalten und neben der Menge den Titel, die Menge und beim Entfernen 115 00:10:15,330 --> 00:10:16,930 übergeben müssen. 116 00:10:17,010 --> 00:10:22,860 Der Titel lautet also natürlich itemData. Artikel. Produkt. Titel, das ist der Name, den 117 00:10:22,890 --> 00:10:30,810 ich dort gewählt habe, für den Betrag, den wir in itemData übergeben können. Artikel. Wenn wir uns ansehen, wie 118 00:10:30,810 --> 00:10:38,550 wir unsere Daten definieren, wäre dies die Summe. Dies ist der Betrag für einen Artikel, unabhängig davon, wie viel 119 00:10:38,790 --> 00:10:42,840 Menge wir dort haben oder welche Menge wir tatsächlich haben. 120 00:10:43,110 --> 00:10:49,770 Und zu guter Letzt sollten wir beim Entfernen auf eine Funktion zeigen, und im Moment haben wir keine Logik dafür, also zeige ich nur 121 00:10:49,770 --> 00:10:50,600 auf eine 122 00:10:50,640 --> 00:10:57,370 leere Funktion und dies ist jetzt ein Warenkorbartikel, den ich rendern möchte es. Probieren 123 00:10:57,400 --> 00:11:07,540 wir es aus. Fügen wir zwei rote Hemden und einen blauen Teppich hinzu, gehen wir zum Einkaufswagen 124 00:11:07,540 --> 00:11:14,940 und jetzt habe ich Textzeichenfolgen, die innerhalb einer Textkomponente gerendert werden müssen und auf den Warenkorbartikel, Zeile 14, zeigen. Schauen wir 125 00:11:14,950 --> 00:11:17,290 uns das an, ja, das ist 126 00:11:17,380 --> 00:11:23,590 es hier von Was meine IDE automatisch hinzugefügt hat, ist dieses Leerzeichen, das ich hier nach meiner 127 00:11:23,650 --> 00:11:26,270 Menge haben möchte. Ich möchte das in der Tat 128 00:11:26,440 --> 00:11:32,810 hier haben, also werde ich hier nur ein zusätzliches Leerzeichen hinzufügen, bevor ich meinen Text schließe. Versuchen wir es jetzt noch einmal, zwei 129 00:11:32,830 --> 00:11:35,530 rote Hemden, einen blauen Teppich. 130 00:11:35,580 --> 00:11:36,920 Sehen Sie den Betrag 131 00:11:36,950 --> 00:11:38,470 hier, sehen Sie den Titel hier, 132 00:11:38,560 --> 00:11:41,990 sehen Sie die Summe und dies summiert sich natürlich auch zu dieser Gesamtsumme. 133 00:11:43,580 --> 00:11:45,730 Jetzt ist es Zeit, dass diese Schaltfläche zum Löschen funktioniert.