Jetzt, da wir den grundlegenden Ablauf haben, können wir zwischen unseren Produkten navigieren, sie in den Warenkorb legen und
dann auch den Warenkorb verwenden, um eine Bestellung aufzugeben und diese Bestellung anzuzeigen und natürlich auch
den Warenkorb zu
bearbeiten, wenn wir wollten. Nachdem dies alles erledigt ist, ist es Zeit, sich dem letzten Teil
dieser Anwendung zuzuwenden, in dem Sie natürlich neue Produkte hinzufügen können.
Das ist auch der Teil, den wir später verfeinern werden, denn später werden wir uns natürlich eingehender mit Benutzereingaben befassen und diese
Daten sogar auf einem Server speichern, aber wir können hier bereits anfangen. Zunächst werden der Benutzerproduktbildschirm und der
Bearbeitungsproduktbildschirm
jetzt wichtig, da in diesen Bildschirmen alle unsere Produkte
angezeigt werden und wir dann auch die Produkte bearbeiten können.
Beginnen wir also mit dem Bildschirm
für Benutzerprodukte und verwandeln ihn in eine React-Komponente, indem wir
React aus React importieren und nicht überraschend Dinge aus React Native importieren. Das Zeug, das ich hier importieren möchte, ist wieder die
flache Liste, da ich am Ende eine Liste der Produkte auf
diesem Benutzerproduktbildschirm ausgeben werde.
Daher haben wir hier die Bildschirmkomponente für Benutzerprodukte, die Requisiten empfängt und bei der
ich dann etwas jsx zurückgeben muss. Am Ende der Datei exportiere ich diese Komponente standardmäßig.
Das ist meine Standardkomponente, die ich immer wieder verwendet habe. Jetzt hier möchte ich
meine Komponenten, meine Produkte mit einer flachen Liste ausgeben und die zuvor
erstellte Produktelementkomponente wiederverwenden.
Zurück in Benutzerprodukten können wir den Produktartikel aus
dem Komponentenordner importieren. Gehen wir also hin und her, um
einzukaufen und dann zu bestellen, nicht zu bestellen, sondern als Produktartikel, und geben Sie
hier natürlich auch einige Daten ein. Jetzt sollten die Daten, die ich hier übergeben möchte,
die Produkte sein, die meinem angemeldeten Benutzer gehörten.
Wir haben im Moment keinen angemeldeten Benutzer, aber wenn Sie sich an den Produktreduzierer erinnern, täuschen
wir dies vor, weil wir dort das Benutzerprodukt-Array haben, das alle Produkte enthält, die in diesem Fall
hier eine Benutzer-ID, eine Eigentümer-ID haben von U1 und ich gehe im Moment nur davon aus, einige Dummy-Daten zu haben, dass dies unsere aktuell
angemeldeten Benutzerdaten sind, später wird dies natürlich dynamisch sein. Das Benutzerprodukt ist also das, was wir
brauchen. Zurück im Bildschirm für Benutzerprodukte müssen wir diese Daten daher mithilfe
des Verwendungsselektors von React Redux von Redux abrufen. Hier erhalten wir unsere Benutzerprodukte,
indem wir den Verwendungsselektor aufrufen, an dem wir übergeben In dieser Funktion erhält es den Status, greift dann auf den Produktteil unserer
Geschäftsprodukte zu, da dies die Kennung ist, die ich dort verwende, und greift dann,
wie ich gerade sagte, hier auf dieses Feld für Benutzerprodukte zu, also hier auf dem Bildschirm
für Benutzerprodukte Zugriff . Benutzerprodukte. Benutzerprodukte sind jetzt das Array, das wir
in Daten einspeisen. Wie immer werde ich hier einen Schlüsselextraktor hinzufügen, der mir die ID gibt, da mein Produkt, wie es hier
in Benutzerprodukten gespeichert ist, am Ende natürlich mein Produktmodell verwendet und daher eine ID
hat Eine eindeutige Kennung, die ich verwenden kann, damit ich sie verwenden kann. Dann müssen wir natürlich wie
immer auch ein Renderelement hinzufügen. Sie kennen dieses Muster offensichtlich bereits. Der Renderartikel erhält hier die Artikeldaten und ich möchte für jeden
Eintrag hier einen neuen Produktartikel zurückgeben, und der Produktartikel benötigt, wenn wir ihn uns ansehen, einige Informationen.
Hier wird eine Detail-Requisite angezeigt, eine Titel-Requisite, eine Preis-Requisite, eine Bild-Requisite und dann auch eine
On-Add-to-Cart-Requisite.
Jetzt sehen Sie vielleicht schon, dass nicht alle diese Requisiten wirklich zu unserem Zweck passen, wenn wir
sie auf dem Benutzerproduktbildschirm verwenden, da dies kein Bildschirm ist, auf dem wir nach Produkten suchen können. Dies ist
kein Bildschirm, auf dem ich hinzufügen möchte Produkte in einen Warenkorb. Ich möchte sie wie hier mit dem Bild, dem Preis usw. ausgeben, aber
es ist mir nicht so wichtig, ob wir auf sie klicken können oder auf diese Schaltflächen. Also werde ich anfangen, das Produkt wie
folgt hinzuzufügen, aber wir müssen es fein abstimmen.
Was wir also brauchen, ist Titel, Preis, Bild und Details zum Anzeigen sowie zum Hinzufügen eines Warenkorbs.
Also brauchen wir das Bild hier und das ist natürlich itemData. Artikel. imageUrl, weil Sie
diese itemData nicht vergessen dürfen. Element in den Endpunkten eines Produkts, wie
hier im Modell definiert, daher haben wir diese imageUrl-Eigenschaft und dann benötigen wir hier auch den Titel, auf den über itemData
zugegriffen werden kann. Artikel. Titel. Wir benötigen den Preis, auf den mit itemData zugegriffen werden kann. Artikel. Preis und wenn wir
uns die Produktartikelkomponente ansehen, die alles erfüllt, was wir hier brauchen, aber jetzt müssen wir Details
auf und in den Warenkorb legen und ich werde diese vorübergehend hinzufügen, aber wir müssen hier eine andere Lösung
finden.
In der Ansicht ist Detail im Moment
eine leere Funktion und beim Hinzufügen zum Warenkorb auch eine leere Funktion, und wir werden dies später anders implementieren.
Im Moment gebe ich hier jedoch einen Produktartikel aus und daher können
wir jetzt zum Bildschirm für Benutzerprodukte navigieren. Um dorthin zu gelangen, ist es Zeit, zum Shop-Navigator zurückzukehren.
Am Ende möchte ich sie meinem Schubladen-Navigator hinzufügen. Als separater Stapel sollte dies jedoch ebenso wie Produkte
und Bestellungen ein separater Stapel sein .
Wir können einfach den Auftragsnavigatorstapel hier kopieren, diesen replizieren und den Benutzerproduktbildschirm hier importieren, also den
Benutzerproduktbildschirm aus dem Bildschirmordner, dort aus dem Benutzerordner und dann den Benutzerproduktbildschirm und diesen im neu kopierten
Stapel dort unten zuordnen Ich werde den Bestellnavigator nicht benennen, da ich diesen Namen hier bereits
habe, aber ich werde ihn nennen, sagen wir vielleicht Admin-Navigator, und hier habe ich
meine Benutzerprodukt-ID, die auf den Benutzerproduktbildschirm zeigt. Jetzt hier als Symbol, in der Schublade möchte
ich ein md erstellen und ios erstellen Symbol und anders als das sollte dies in Ordnung sein.
Jetzt müssen wir nur noch diesen Navigator zu unserem Schubladen-Navigator hinzufügen.
Dort füge ich den Admin-Schlüssel hinzu und zeige auf den Admin-Navigator. Jetzt sollten
wir das tatsächlich erreichen können. Wenn wir zur App zurückkehren, haben wir
den Administratoreintrag und wenn ich darauf klicke, erhalten wir ein Problem mit meinen Benutzerprodukten.
Der Status undefiniert ist kein Objekt. Lassen Sie uns einen kurzen Blick auf den Benutzerproduktbildschirm werfen.
Ja, das sollte seien Sie Produkte, weil unsere Scheibe hier im kombinierten Reduzierer Produkte genannt wird.
Also hier sollten es
auch Produkte sein, kleiner Tippfehler von meiner Seite. Jetzt sieht das besser aus und jetzt sieht es vielleicht so aus, als
hätte sich nichts geändert, aber tatsächlich können Sie sehen, dass meine Navigationselemente verschwunden sind, da ich jetzt auf einem neuen Bildschirm bin, aber meine alte
Liste hier habe, aber mit weniger Produkten.
Wenn Sie Android vergleichen, wo ich auf dem Startbildschirm bin, haben wir dort mehr Produkte,
jetzt habe ich nur diejenigen, bei denen U1 die Besitzer-ID ist.
Das ist
gut so, aber natürlich mag ich diese Schaltflächen hier
nicht und ich möchte hier natürlich auch einen Menüpunkt und einen Header-Titel haben.
Es gibt einige Dinge, die wir beheben müssen. Diese Schaltflächen sind natürlich das Wichtigste oder
das Auffälligste, was jedoch falsch ist. Trotzdem beginne ich mit
der Kopfzeile. Im Bildschirm für Benutzerprodukte können
wir die Navigationsoptionen und den Bildschirm für Benutzerprodukte hinzufügen. Navigationsoptionen und dort legen Sie beispielsweise einen Header-Titel
Ihrer Produkte fest, und wir benötigen auch die Menüschaltfläche, damit wir tatsächlich auch zum Produktübersichtsbildschirm gehen und von dort
diesen linken Header-Teil hier kopieren und zum Benutzerproduktbildschirm zurückkehren können
und füge dies hier hinzu.
Jetzt brauchen wir jedoch diese Funktionsform der Navigationsoptionen, in der wir am Ende ein
Objekt mit allen darin enthaltenen Optionen zurückgeben. Das müssen wir also so ändern und
wir müssen auch sicherstellen, dass wir die Header-Schaltflächen item und importieren Kopfzeile.
Zurück im Produktübersichtsbildschirm habe ich diese Importe hier, kopiere sie
aus dem Produktübersichtsbildschirm, gehe zum Benutzerproduktbildschirm
und füge sie dort so
hinzu, zum Beispiel, damit Sie alles importieren,
was Sie brauchen.
Wir müssen auch eine Plattform-API importieren, da wir diese auch beim Einrichten der Header-Schaltflächen verwenden.
Zumindest, wenn wir in den Admin-Bereich gehen, haben wir hier unseren Titel, wir haben die Schublade, wieder die Menüschaltfläche,
aber was
ist nun mit diesen Schaltflächen hier?
Wir müssen das Aussehen unseres Produkts ändern.