Weiter zu den Warenkorbartikeln.
Jetzt werde ich wieder eine separate Komponente für jeden Warenkorbartikel erstellen, den
ich hier ausgeben möchte.
Ich könnte es hier tun, aber es wird wieder eine etwas längere Komponente sein und ich möchte diese Datei nicht
damit aufblähen und ich werde sie später auch an einer anderen Stelle verwenden, was seltsam
klingen könnte, da wir nur eine haben Ein Warenkorbbildschirm, aber Sie werden sehen, wo wir
später einen Warenkorbartikel verwenden können.
Gehen wir dazu zurück in den Komponentenordner und dort möglicherweise in den Shop-Ordner und fügen
ein CartItem hinzu. js-Datei neben dem Produktartikel.
Jetzt haben wir natürlich eine normale React-Komponente, sodass Sie das Spiel kennen und wissen,
wie diese erstellt werden.
Wir importieren React von React und da dies die Komponente ist, die etwas ausgeben soll, importieren wir
eine Reihe von Komponenten von React Native, den Kernprimitiven, mit denen wir die Benutzeroberfläche erstellt haben.
Ich brauche eine Ansicht, ich brauche einen Text, ich brauche hier sicher ein Stylesheet und dann füge ich hier meine Konstante hinzu,
Warenkorbartikel, der Requisiten erhält, und am Ende hier etwas jsx-Code zurückgeben. Ich werde mein Styles-Objekt
hier mit Stylesheet
erstellen hinzufügen und dieses als Standard-Warenkorbelement exportieren.
Nun liegt der JSX-Code, der hier zurückgegeben werden soll, natürlich immer bei Ihnen, aber ich
werde hier eine Ansicht haben und in dieser Ansicht möchte ich natürlich die Menge und den Titel ausgeben, auch den
Gesamtbetrag für diesen Warenkorbartikel Wir haben mehr als einen hinzugefügt, dann ist dies nicht nur der Preis
eines einzelnen Artikels, sondern natürlich Preis mal Menge, und ich möchte auch eine Schaltfläche haben, mit der
ich diesen Artikel aus dem Warenkorb
löschen kann, ein Papierkorbsymbol.
Am Ende werde ich hier eine Zeile mit einem Text haben und dieser Text wird die Menge und den Titel
haben, also werde ich dort die Menge und den Titel haben und eigentlich sollte dies anders gestaltet sein, also werde ich
das umbrechen Menge hier in einen separaten Textknoten und mache dasselbe für den Titel,
so dass ich hier am Ende zwei separate Textknoten habe und dann nach diesem Textblock hier eine Ansicht sein sollte, um zwei andere Elemente
zu gruppieren, ein weiteres Stück von Text, der hier den Gesamtbetrag für diesen
Artikel darstellt, also Betrag und daneben eine Schaltfläche oder eigentlich keine Schaltfläche, sondern ein drückbares Symbol.
Also werde ich mein eigenes berührbares Ding mit berührbarer Deckkraft erstellen und natürlich könnten
Sie diese Plattformdifferenzierung erneut für den Welligkeitseffekt durchführen, aber ich werde hier auf beiden Plattformen mit
Deckkraft arbeiten und Ionicons von @ expo / vector-icons importieren was wir bereits früher hinzugefügt haben, weil ich
hier nur
ein Symbol haben möchte, auf das wir drücken können, also möchte ich hier eine
berührbare Deckkraft haben und diese um ein Symbol wickeln, das wir mit Ionicons hinzufügen können, wie Sie
zuvor in diesem Kurs hinzugefügt haben, mit diesem als Eine Komponente verwendet hier und da einfach einen
Namen, der sich je nach Plattform unterscheiden sollte, da der Name die Symbolkennung ist. Dort
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
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
farbig aussehen sollte, und hier werde ich tatsächlich Rot verwenden, weil es dies entfernt Artikel so sollte
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
weiterleiten, die die Warenkorbartikelkomponente verwendet.
Ich erwarte daher, dass Sie eine Stütze zum Entfernen erhalten. Dieser Name liegt wie immer bei Ihnen und
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
das ist eine Stildeklaration, die wir danach hinzufügen können.
Apropos Stile, es gibt natürlich weitere Stile,
die hinzugefügt werden müssen, zum Beispiel in der obersten Ansicht hier. Ich gebe
diesem einen Artikelstil für den Warenkorb. Dieser
Text hier erhält
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
diese Stilkennungen wie immer ganz bei Ihnen.
Hier auf dem Titel habe ich
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
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
Stylesheet und fügen dort den
Warenkorbartikel hinzu, der unser Stammstil ist,
dann Artikeldaten und
-menge, also
Artikeldatenmenge,
dann den Titel hier und die Menge und nicht zuletzt Zumindest die Schaltfläche Löschen.
Das müssen wir hier auch hinzufügen. Nun, auf der Schaltfläche "Löschen" ist das
ganz
einfach. Ich füge links von 20 einen Rand hinzu, um einen gewissen Abstand zwischen dem Symbol und dem daneben liegenden Text
zu erhalten. Gehen wir damit zum Warenkorb.
Dort möchte ich eine Polsterung von 10 haben, eine Hintergrundfarbe von Weiß. Ich werde meinen Kartenlook hier
nicht verwenden. Ich werde hier keinen Schatten hinzufügen. Sie könnten das tun, aber ich bevorzuge einen anderen
Look.
Wichtig ist die Flex-Richtungszeile, damit alle Elemente in dieser Ansicht angezeigt werden, sodass dieser
Text und diese Ansicht in ein und derselben Zeile nebeneinander liegen. Begründen Sie, dass der Inhalt ein
Leerzeichen zwischen diesen beiden Inhaltsblöcken sein sollte, und ich werde auch einen Rand in horizontaler Richtung von
20 hinzufügen, damit links
und rechts um meine Warenkorbartikel ein gewisser Abstand besteht.
Nun, Artikeldaten, das ist der Stil, den wir um Menge, Titel und Menge und die
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
hier Elemente ausrichten zentrieren, um den gesamten Inhalt vertikal zu zentrieren. Für die Menge hier möchte ich eine Schriftfamilie von
Open-Sans festlegen. Übrigens können wir hier auch eine Ansicht anstelle eines Textes um diese beiden Textknoten verwenden, da ich hier keine textspezifischen
Stile einstelle Lassen Sie uns stattdessen einen Blick darauf werfen,
aber damit zurück zur Menge. Wir können diesem eine Schriftfamilie
von Open-Sans geben, eine Farbe von vielleicht dieser dunkelgrauen Farbe, die wir zuvor für Preise verwendet
haben, jetzt für die Menge und eine Schriftgröße von 16 vielleicht und dann
hier für den Titel, werde ich eine setzen Schriftfamilie von Open Sans ohne Fettdruck, um dies fett zu machen,
geben Sie dies auch eine Schriftgröße von 16 und auf die Menge hier werde ich genau das gleiche tun.
Daher könnten wir dies natürlich auch zu ein und demselben Stil zusammenführen, vielleicht diesen Haupttext oder ähnliches benennen,
den
Betrag loswerden, da wir genau dieselben Stildefinitionen haben und jetzt den Haupttext hier anstelle des Titels
und hier stattdessen verwenden der Menge.
Okay.
Dies ist
ein Warenkorbartikel. Lassen Sie uns ihn
jetzt mithilfe einer flachen Liste auf
dem Warenkorbbildschirm verwenden, da wir dort derzeit keine Artikel auf dem Warenkorbbildschirm ausgeben.
Diese Ansicht hier kann jetzt durch eine flache Liste
ersetzt werden, und die Daten, die wir dort speichern, sollten eine Reihe von Warenkorbartikeln enthalten. Genau das haben wir hier
in der Konstante für
Warenkorbartikel. Lassen Sie uns dies hier verwenden.
Jetzt
füge ich hier auch einen Schlüsselextraktor hinzu, und hier müssen Sie ihn unbedingt hinzufügen, damit React Native
weiß, wo sich Ihr Schlüssel befindet, da jedes Element hier am Ende dieses Formats hat und weder einen Schlüssel
noch einen hat ID-Eigenschaft, aber wir wissen, dass die Produkt-ID als Schlüssel verwendet werden kann, da diese für
jeden Artikel eindeutig ist.
Also hier zeige ich auf Punkt. productId am Ende und jetzt zum
Rendern von Artikeln möchte ich diesen Warenkorbartikel verwenden, den wir gerade hinzugefügt haben.
Hier müssen wir also den Warenkorbartikel aus dem Komponentenordner, dem Shopordner und dort dem Warenkorbartikel importieren und diese Warenkorbartikelkomponente dort
unten in unserer Renderfunktion verwenden, wo wir am Ende unsere Artikeldaten erhalten und
dann unsere zurückgeben Warenkorbartikel wie dieser und jetzt auf dem Warenkorbartikel müssen wir einige Daten übergeben,
oder? Im Warenkorbartikel habe
ich momentan Dummy-Platzhalter. Natürlich erwarte ich hier, dass ich meine Menge auf eine Requisite mit dem Namen "Menge" bekomme. Ich
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
auf fest auf 2 aufrufen, um sicherzustellen, dass wir dort immer zwei Dezimalstellen haben und wir haben auch die
Stütze zum Entfernen, die wir richtig erwarten.
Also haben wir Menge, Titel, Menge und beim Entfernen, also zurück im Warenkorbbildschirm, das
müssen wir hinzufügen, die Menge ist natürlich itemData. Artikel. Menge, weil ein einzelner
Artikel hier natürlich ein solcher Artikel ist und wir
daher eine Menge behalten und neben der Menge den Titel, die Menge und beim Entfernen
übergeben müssen.
Der Titel lautet also natürlich itemData. Artikel. Produkt. Titel, das ist der Name, den
ich dort gewählt habe, für den Betrag, den wir in itemData übergeben können. Artikel. Wenn wir uns ansehen, wie
wir unsere Daten definieren, wäre dies die Summe. Dies ist der Betrag für einen Artikel, unabhängig davon, wie viel
Menge wir dort haben oder welche Menge wir tatsächlich haben.
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
auf eine
leere Funktion und dies ist jetzt ein Warenkorbartikel, den ich rendern möchte es. Probieren
wir es aus. Fügen wir zwei rote Hemden und einen blauen Teppich hinzu, gehen wir zum Einkaufswagen
und jetzt habe ich Textzeichenfolgen, die innerhalb einer Textkomponente gerendert werden müssen und auf den Warenkorbartikel, Zeile 14, zeigen. Schauen wir
uns das an, ja, das ist
es hier von Was meine IDE automatisch hinzugefügt hat, ist dieses Leerzeichen, das ich hier nach meiner
Menge haben möchte. Ich möchte das in der Tat
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
rote Hemden, einen blauen Teppich.
Sehen Sie den Betrag
hier, sehen Sie den Titel hier,
sehen Sie die Summe und dies summiert sich natürlich auch zu dieser Gesamtsumme.
Jetzt ist es Zeit, dass diese Schaltfläche zum Löschen funktioniert.