Um das Aktionselement zur Kopfzeile hinzuzufügen, mache ich etwas, was ich auch im Navigationsbereich getan habe.
Im Komponentenordner möchte ich
meine eigene Kopfzeilenschaltfläche hinzufügen und jetzt
füge ich dazu einen neuen Unterordner hinzu Dort werde ich UI nennen und meine Idee hier ist einfach.
Ich habe den Shop-Ordner, der alle Komponenten enthält, die ich in meinem Shop
verwende und die einige Shop-bezogene Informationen ausgeben. Im UI-Ordner möchte ich einige allgemeine
UI-Bausteine haben, die ich natürlich auch in dieser Shop-Anwendung verwende, die sich
jedoch nicht wirklich auf die Ausgabe von Shop- oder produktbezogenen Daten konzentrieren, sondern lediglich dazu
dienen, ein Standard-Styling oder -Layout bereitzustellen In diesem UI-Ordner, in dem ich meine eigene Header-Schaltfläche hinzufügen werde, indem ich dort hineingehe
und React from React importiere und dann die Header-Schaltfläche aus den React-Navigations-Header-Schaltflächen importiere. Dieses Paket habe ich am Anfang des
Moduls installiert, falls Sie dies nicht getan haben Stellen Sie sicher, dass Sie dieses Paket npm installieren, und
importieren Sie dann auch Ionicons von @ expo / vector-icons.
Um sicherzugehen, dass Sie das installiert haben, führen Sie npm install --save @ expo / vector-icons aus, damit dieses
Paket in Ihrem Projekt verfügbar ist.
Dies sind die Importe, die ich hier
brauche. Jetzt möchte ich auch meine Farben aus dem Konstantenordner und dort die Farben importieren. js-Datei und jetzt hier füge ich meine
benutzerdefinierte Header-Button-Komponente hinzu, die am Ende eine normale React-Komponente ist, die Requisiten empfängt und etwas jsx
zurückgeben muss, und ich werde natürlich am Ende und jetzt meine benutzerdefinierte Header-Button hier exportieren
Das hier zurückgegebene jsx ist die Header-Schaltfläche, die ich aus den React-Navigations-Header-Schaltflächen importiere,
aber ich muss sie auf eine bestimmte Weise konfigurieren. Verwenden Sie hier die
Header-Schaltfläche aus den React-Navigations-Header-Schaltflächen. Zum einen sollte dies alle Requisiten erhalten,
die wir hier bekommen, also leiten wir diese einfach weiter, aber zusätzlich setze ich meine Icons-Komponente
hier auf Ionicons, so dass wir immer Ionicons zum
Rendern verwenden und natürlich eines davon verwenden können die verschiedenen Vektorsymbolsätze, die auch von @ expo / vector-icons bereitgestellt werden.
Ich werde die Symbolgröße auf 23 einstellen, was sich als sehr gut erwiesen hat, aber natürlich können Sie auch
hier mit verschiedenen Werten experimentieren. Wenn Sie
ein anderes Symbolset verwenden, probieren Sie möglicherweise eine andere Symbolgröße aus. Und für die Farbe kommt es darauf an, denn
auf Android haben
wir hier einen roten Hintergrund, auf iOS haben wir keinen, also müssen wir
eine andere Farbe festlegen, basierend auf der Plattform, auf
der wir laufen, also werde ich Importieren Sie die Plattform tatsächlich von React Native hier und dann können wir die Plattform hier überprüfen.
Wenn die Betriebssystemversion Android
ist, weiß ich, dass ich diesen festen Feldhintergrund
habe, daher sollte das Symbol weiß sein. Unter iOS hingegen ist der Hintergrund nicht ausgefüllt,
sondern transparent. Daher setze ich unter iOS meine Symbolfarbe auf Farben. primär.
Jetzt können wir das verwenden, um hier auf dem Produktübersichtsbildschirm ein Symbol hinzuzufügen. Dort in meinen Navigationsoptionen
möchte ich meinen rechten Kopfbereich hinzufügen, also ein Symbol rechts von meiner Kopfzeile, und dafür müssen wir
hier importieren Für einige Dinge müssen wir Header-Schaltflächen und Elemente aus dem von uns
installierten React-Navigations-Header-Schaltflächenpaket importieren.
Ich muss natürlich auch meine eigene Header-Schaltfläche aus den Header-Schaltflächen der Benutzeroberfläche der Komponenten importieren. Diese Komponente, an
der wir gerade gearbeitet haben, und jetzt dort unten sind die Header-Schaltflächen als Wrapper, um möglicherweise mehrere Elemente darin zu
haben, aber ich werde nur eines hinzufügen item, ein selbstschließendes Element, müssen auf
Kopfzeilenschaltflächen, bevor wir mit dem Element fortfahren, die Kopfzeilenschaltflächenkomponente gleich der Kopfzeilenschaltfläche setzen,
also hier unsere eigene Kopfzeilenschaltfläche. Und der Artikel kann jetzt konfiguriert werden. Er sollte einen Titel erhalten, der
ein
Warenkorb sein kann. Er sollte einen Symbolnamen erhalten. Ich möchte tatsächlich ein anderes Symbol verwenden, das auf der
Plattform basiert, auf der wir ausgeführt werden. Daher von React Native, I. Wenn Sie eine Plattform importieren, die optional ist, können Sie für
beide Plattformen ein und dasselbe Symbol verwenden, aber ich denke, es sieht auch gut aus, unterschiedliche Symbole zu haben.
Und dann überprüfe ich hier das Betriebssystem der Plattform und wenn das Android ist, dann möchte ich das md cart-Symbol verwenden, das das Ionicon-Cart-Symbol
für das Materialdesign ist. Andernfalls verwende ich das iOS-Cart-Symbol und wieder finden Sie alle verfügbaren Symbole in dieser Symbolliste
Ich habe Ihnen früher im Kurs gezeigt,
die Liste der Expo- / Vektorsymbole und nicht zuletzt, wenn das Element gedrückt wird, möchten wir wahrscheinlich etwas
tun, und im Moment mache ich nichts anderes als wir Ich werde das bald ändern.
Wenn wir dies jetzt speichern,
sollten
wir dieses Symbol hier sehen,
hier ist es, hier ist unser Warenkorb, auch auf Android, und jetzt müssen wir nur noch sicherstellen, dass wir
zu unserem Warenkorbbildschirm weitergeleitet werden, wenn wir darauf tippen. Dazu müssen wir dem Warenkorbbildschirm natürlich eine Logik oder eine Ausgabe hinzufügen.
Innerhalb des Warenkorbbildschirms haben wir natürlich eine
normale React-Komponente, also importieren
wir React von React, wir importieren auch etwas von React Native und dass etwas eine Ansichtskomponente ist, um unseren
Bildschirm zu umbrechen, werden wir wahrscheinlich Text ausgeben auch.
Dort werden einige Warenkorbelemente aufgelistet, die wir mit einer flachen Liste erstellen können,
um die Optimierung zu integrieren. Wahrscheinlich möchten wir einige Dinge mit einem Stylesheet formatieren,
und ich werde auch die integrierte Schaltflächenkomponente importieren. Jetzt ist mein Warenkorbbildschirm hier wie immer eine React-Komponente und ich werde
dieses Styles-Objekt hier mit Stylesheet einrichten. erstellen, damit wir auch diese Komponente formatieren
können, und am Ende exportieren wir unseren Warenkorbbildschirm hier standardmäßig.
Jetzt können Sie diesen Warenkorbbildschirm natürlich so erstellen, wie Sie möchten. Ich werde ihn so erstellen,
dass wir eine Ansicht haben, und in dieser Ansicht möchte ich zwei Hauptabschnitte haben. Der oberste Abschnitt ähnelt der Zusammenfassung, in der ich
den Gesamtbetrag sehe und in der ich die Schaltfläche Jetzt bestellen habe.
Dies wird in einer Reihe sein, also werde ich hier eine verschachtelte Ansicht haben, in der ich
Elemente nebeneinander positionieren kann, wo ich einen Text mag,
in dem ich total und dann hier Dollarzeichen und dann vielleicht meinen Gesamtpreis sage. Wir können dies auch verschachteln. Sie können verschachtelte Textkomponenten
haben, wenn Sie sich ohne Probleme daran erinnern, diesem Beispiel eine separate Farbe zu geben. Deshalb habe ich
vorerst den Hardcode 19. 99 drin, aber später wird dies dynamisch abgeleitet.
Das ist
eine Sache, und außerdem möchte ich in derselben Zeile hier einen Button mit einem Auftragstitel haben, über den
ich ihn drücken kann, um eine Bestellung aufzugeben, meinen Warenkorb zu leeren und diesen zu meinen
Bestellungen hinzuzufügen, die wir noch verwalten
müssen und geben Sie es am Ende auf dem Bestellbildschirm aus. Jetzt unter diesem Zusammenfassungsabschnitt möchte ich eine flache Liste mit meinen separaten Warenkorbartikeln haben, damit wir wirklich sehen können,
was sich im Warenkorb befindet, welche
Produkte sich dort befinden, wie viel von jedem Produkt sich dort befindet, also ist
das eine andere Sache, die ich wird dort ausgegeben. Im Moment füge ich hier nur eine
Ansicht mit einem Text von Warenkorbelementen als Platzhalter hinzu, aber auch dies wird in Zukunft eine
flache Liste sein, aber beginnen wir hier mit der Summe. Um diese Summe zu erhalten, können wir
auf Redux zugreifen, da wir dort unseren Warenkorb verwalten. Daher können wir den Selektor von React Redux verwenden, um zu erfahren,
wie Sie Daten aus unserem Shop abrufen können. Hier habe ich möglicherweise die Gesamtmenge meines Warenkorbs, die ich
möglicherweise erhalte mit Hilfe von Use Selector aus meinem Bundesstaat. Wagen, Scheibe. Wagen hier, weil in
der App. Als Datei in kombinierten Reduzierstücken habe ich meinem Wagenreduzierer hier einen Wagenschlüssel zugewiesen.
Also hier habe ich. Wagen und dann dort,
innerhalb des Wagenreduzierers, verwalte ich meinen Gesamtbetrag und das Feld Gesamtbetrag, sodass wir hier darauf zugreifen müssen, Gesamtbetrag.
Dies ergibt die Gesamtmenge des Wagens und wir können diese jetzt dort unten verwenden.
Damit dies auch gut aussieht, ist es Zeit für ein Styling.
In der obersten Ansicht hier füge ich einen Bildschirmstil hinzu, möglicherweise weil dies am Ende
den gesamten
Bildschirm umschließt. In dieser Ansicht füge ich dann einen Zusammenfassungsstil hinzu, da dieser alle
Zusammenfassungselemente enthält, und hier In diesem Text
füge ich einen Stil für den Zusammenfassungstext hinzu und hier füge ich einen Stil für den Betrag hinzu, damit wir diesen Betragstext anders gestalten können.
Für Stile, die
ich festlegen möchte, gehen wir zum Stylesheet und fügen Bildschirm, Zusammenfassung, Zusammenfassungstext hinzu. Und wie habe ich es dann benannt?
Menge und natürlich liegt es wie immer ganz bei Ihnen, wie Sie dies jetzt stylen möchten.
Jetzt beginne ich mit dem Bildschirm. Am Ende möchte ich die volle Größe des Bildschirms einnehmen, wenn wir später
mit der flachen Liste arbeiten müssen, aber ich werde einfach anfangen und wir werden nur sagen, dass ich insgesamt einen Rand haben möchte Richtungen eigentlich
hier von 20, also um alles herum, so dass um alles herum etwas Platz ist. Dann hier eine Zusammenfassung, die unser Feld mit allen Elementen
in der Reihenfolge jetzt ist, und unser Text sollte eine flexible Zeilenrichtung verwenden,
um Elemente in einer Zeile zu positionieren.
Ich habe Elemente in der Mitte ausgerichtet, um sicherzustellen, dass sie vertikal und auf ihrer Hauptachse
zentriert sind. Ich möchte den Inhaltsbereich zwischen den Begriffen verwenden, damit die Elemente den freien Speicherplatz zwischen ihnen haben und Elemente
dieser Text hier und diese Schaltfläche sind. Außerdem können wir hier ein wenig Rand hinzufügen,
vielleicht auch 20,
was meistens wichtig ist, um auch einen gewissen Abstand zwischen der Zusammenfassung und unserer flachen Liste zu
haben. Deshalb werde ich hier den unteren Rand verwenden, um nur einen gewissen Rand zu haben unten und ich möchte hier
einen Abstand von 10 hinzufügen, da sich die Zusammenfassung in einer erhöhten Box befinden
sollte. Für diese Box hier gehe ich zu meiner Produktartikelkomponente und kopiere meinen hier eingerichteten Schatten und den Rand Radius habe ich vielleicht hier und die Hintergrundfarbe, so
dass ich hier im Warenkorb das gleiche Aussehen habe und es liegt natürlich an dir, ob du
das willst oder nicht, aber ich werde das dort kopieren.
Für den Zusammenfassungstext möchte ich jetzt eine Schriftfamilie mit offener, fettgedruckter Schrift verwenden, um diese Summe und eine Schriftgröße von 18 wirklich
hervorzuheben, und für die Menge an Text werde ich die Farbe
auf Farben setzen. Akzentfarbe.
Dafür ist es natürlich wichtig, dass Sie Farben aus dem Konstantenordner importieren. Dann verwende ich Akzent
und nicht Primär, um dies wirklich hervorzuheben. Um zu sehen, ob das so aussieht, wie
wir es möchten, müssen wir sicherstellen, dass wir durch Tippen auf diese Kopfzeile in
unserem Produktübersichtsbildschirm tatsächlich zum Warenkorbbildschirm gelangen. Dazu sind zwei Dinge erforderlich.
Zum einen müssen wir hier navigieren, aber bevor wir das tun können,
müssen wir den Warenkorbbildschirm in unserem Navigator registrieren. Also mache ich das zuerst, ich importiere meinen Warenkorb-Bildschirm hier aus
dem Bildschirmordner, nicht überraschend, aus dem Shop-Ordner und dort aus dem Warenkorb-Bildschirm, und jetzt ist dies der dritte Bildschirm,
den ich hier zu diesem Stapel-Navigator hinzufüge, Warenkorb zeigt auf den Warenkorb-Bildschirm . Mit diesem hier hinzugefügten Setup können wir zum Produktübersichtsbildschirm zurückkehren. Dort
benötigen wir nun dieses Funktionsformular für die Navigationsoptionen, da die Navigationsdaten es uns dann ermöglichen, auf die
Navigationsstütze zu tippen und die Navigation aufzurufen. Daher müssen wir dies
umbrechen in einem anderen Objekt, das wir zurückgeben
und dann hier können wir navData aufrufen. Navigation. navigiere und dort gehe ich zum Einkaufswagen und
dies ist natürlich die Kennung, die ich gerade im Shop-Navigator hier
ausgewählt habe, diese. Mal sehen, wenn ich hier
klicke, da sind wir, das ist meine
Summe.
Ich denke tatsächlich,
dass die Akzentfarbe dort nicht so gut ist, also gehe
ich zurück zum Warenkorbbildschirm und gestalte dies, um das zu verwenden Primärfarbe auch, aber Hauptsache, wir können dorthin
gehen und wenn ich jetzt versuche, Artikel in den Warenkorb zu legen, habe ich das Hemd zweimal und den
Teppich einmal hinzugefügt, diese Gesamtmenge sieht für mich gut aus. Versuchen wir dies natürlich auch auf Android, um sicherzustellen, dass es auch
dort funktioniert und im Allgemeinen funktioniert. Ich füge ein weiteres rotes Shirt hinzu und daher sehen wir hier auch ein Problem
mit der Art und Weise, wie dies angezeigt wird. Um dies zu beheben, stellen Sie auf dem Warenkorbbildschirm sicher, dass
beim Preis immer nur zwei Dezimalstellen für den Betrag mit "fest" ausgegeben werden. Übrigens, falls Sie sich fragen, woher das
kommt, diese lange Zahl, das
ist kein Fehler oder nichts, um Native wirklich zu reagieren. Dies ist
normales Javascript-Verhalten, wenn Sie mit Gleitkommazahlen arbeiten und natürlich beheben sollte hier nicht auf den Stil bezogen
werden, sondern auf den Gesamtbetrag des Wagens. Dies war also ein normales Verhalten,
kein Fehler. Auf diese Weise speichert Javascript intern Gleitkommazahlen, die Sie sagen könnten, aber jetzt
stellen wir sicher, dass dies korrekt mit zwei Dezimalstellen ausgegeben wird. Fehlende Sache ist der Knopf und hier möchte ich jetzt tatsächlich Farbe, Farben Akzent verwenden,
um meinen Akzent farbigen Knopf zu haben. Wenn ich jetzt hier auf iOS in meinen Warenkorb gehe, sieht die Schaltfläche
dort so aus, so sieht sie jetzt auf Android aus.
Wir können dies jederzeit drücken, natürlich möchte ich es deaktivieren, wenn sich nichts im
Warenkorb befindet, und dafür müssen wir jetzt auch unsere Warenkorbartikel besorgen. So können Wagenartikel auch mit dem Verwendungswähler abgerufen werden, ebenfalls
aus der Wagenscheibe, aber dort ist es die Artikelstütze aus dem Wagenreduzierer, an der wir interessiert sind.
Wenn ich mir also den Wagenreduzierer ansehe, sehen Sie, dass wir die Artikel-Eigenschaft haben.
Dies ist ein Objekt, das ich
gerade abrufe. Warenkorbartikel sind also ein Objekt, kein Array. Eigentlich wäre ein Array hier besser für mich. Daher verwende ich die lange Form, um
dies zu erhalten, und gebe ein Array zurück hier und kein Objekt. So können wir unsere transformierten Warenkorbelemente hier abrufen,
indem wir beispielsweise hier innerhalb dieser Auswahlfunktion ein neues Array erstellen und dann eine for / in-Schleife hinzufügen, um alle Schlüssel
im Status zu durchlaufen. Wagen. Artikel, um alle Schlüssel-Wert-Paare
in diesem Warenkorb-Objekt zu durchlaufen, das
wir dort haben, und ich möchte jedes von
ihnen als Artikel zu den transformierten Warenkorb-Artikeln hinzufügen. Dort werde ich also ein Javascript-Objekt mit einer Produkt-ID pushen. Nehmen wir
an, dies ist nur mein Schlüssel, da im Objekt "ID-Warenkorb" die Produkt-ID als Schlüssel gespeichert wird,
wenn Sie
sich erinnern. Jetzt füge ich diese der Produkt-ID-Eigenschaft hinzu In diesem Objekt füge ich dem transformierten Warenkorb-Artikel-Array hinzu
und außerdem habe ich meinen Produkttitel, der natürlich den Status hat. Wagen. Elemente für den angegebenen
Schlüssel. Produktname.
Wenn Sie sich Ihr Warenkorb-Artikelmodell ansehen, werden Sie feststellen, dass dort Produkttitel und Produktpreis die Eigenschaftsnamen sind, die
den Produkttitel und den Produktpreis enthalten. Auf diese Weise
greifen wir auf beide zu,
sodass ich dasselbe tun werde hier für den Produktpreis und danach brauche ich auch die Menge,
die Zustand ist. Wagen. Elemente für den angegebenen Schlüssel. Menge und natürlich auch die Summe, die Zustand ist. Wagen. Artikel. Schlüssel. Summe, wieder im Grunde genau das, was wir hier im Warenkorb hatten.
Ich erstelle also sozusagen einen neuen Warenkorbartikel,
jedoch nicht mit meinem Modell, da es sich um einen Warenkorbartikel mit einer
zusätzlichen Produkt-ID-Eigenschaft handelt, sodass ich diesen hier und jetzt in diesem transformierten Warenkorbartikel-Array habe was ich danach für die for-Schleife zurückgebe,
so dass dieser Selektor am Ende ein Array und kein Objekt zurückgibt, so dass Warenkorbartikel jetzt ein Array sind,
das es uns
erleichtert, es in der flachen Liste zu verwenden, und es uns auch ermöglicht, es zu überprüfen Hier auf der
Schaltfläche Jetzt bestellen, ob wir es deaktivieren möchten, indem wir einfach die Länge dieses Arrays überprüfen, das
wir jetzt in Warenkorbartikeln haben.
Hier auf der Schaltfläche können
wir die Deaktivierungsstütze einstellen, die sie dankenswerterweise unterstützt. Dies ist eine integrierte Komponente, die einfach eine deaktivierte Stütze hat. Dort kann
ich überprüfen, ob die Länge der Warenkorbartikel gleich Null ist. Wenn ja, dann ich Ich weiß, dass es leer ist und dann möchte ich die Schaltfläche deaktivieren. Deaktiviert erhält also true oder false. Standardmäßig ist es false, aber ich setze es auf true, wenn die
Länge der Warenkorbartikel 0 beträgt. Und jetzt sehen Sie, wenn ich
zum Warenkorb-Bildschirm gehe, ist dies deaktiviert. Wenn ich jedoch
ein Produkt hinzufüge und dorthin gehe, ist es aktiviert und Sie können natürlich auch eine andere Farbe für die Schaltfläche "Jetzt bestellen" verwenden, wenn Sie möchten.
Damit sind wir den fertigen Wagen einen
Schritt näher gekommen und das nächste Ziel ist natürlich die Ausgabe der Wagenartikel.