1 00:00:02,200 --> 00:00:08,380 Jetzt, da wir den grundlegenden Ablauf haben, können wir zwischen unseren Produkten navigieren, sie in den Warenkorb legen und 2 00:00:08,410 --> 00:00:13,900 dann auch den Warenkorb verwenden, um eine Bestellung aufzugeben und diese Bestellung anzuzeigen und natürlich auch 3 00:00:13,930 --> 00:00:15,040 den Warenkorb zu 4 00:00:15,070 --> 00:00:20,530 bearbeiten, wenn wir wollten. Nachdem dies alles erledigt ist, ist es Zeit, sich dem letzten Teil 5 00:00:20,530 --> 00:00:24,430 dieser Anwendung zuzuwenden, in dem Sie natürlich neue Produkte hinzufügen können. 6 00:00:24,430 --> 00:00:29,960 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 7 00:00:29,980 --> 00:00:36,770 Daten sogar auf einem Server speichern, aber wir können hier bereits anfangen. Zunächst werden der Benutzerproduktbildschirm und der 8 00:00:36,770 --> 00:00:37,910 Bearbeitungsproduktbildschirm 9 00:00:37,910 --> 00:00:42,560 jetzt wichtig, da in diesen Bildschirmen alle unsere Produkte 10 00:00:42,560 --> 00:00:47,450 angezeigt werden und wir dann auch die Produkte bearbeiten können. 11 00:00:47,480 --> 00:00:49,720 Beginnen wir also mit dem Bildschirm 12 00:00:49,750 --> 00:00:53,420 für Benutzerprodukte und verwandeln ihn in eine React-Komponente, indem wir 13 00:00:53,600 --> 00:01:01,970 React aus React importieren und nicht überraschend Dinge aus React Native importieren. Das Zeug, das ich hier importieren möchte, ist wieder die 14 00:01:01,970 --> 00:01:06,250 flache Liste, da ich am Ende eine Liste der Produkte auf 15 00:01:06,320 --> 00:01:08,260 diesem Benutzerproduktbildschirm ausgeben werde. 16 00:01:08,630 --> 00:01:15,650 Daher haben wir hier die Bildschirmkomponente für Benutzerprodukte, die Requisiten empfängt und bei der 17 00:01:15,650 --> 00:01:22,960 ich dann etwas jsx zurückgeben muss. Am Ende der Datei exportiere ich diese Komponente standardmäßig. 18 00:01:23,090 --> 00:01:29,670 Das ist meine Standardkomponente, die ich immer wieder verwendet habe. Jetzt hier möchte ich 19 00:01:30,000 --> 00:01:38,070 meine Komponenten, meine Produkte mit einer flachen Liste ausgeben und die zuvor 20 00:01:38,070 --> 00:01:40,560 erstellte Produktelementkomponente wiederverwenden. 21 00:01:40,560 --> 00:01:44,130 Zurück in Benutzerprodukten können wir den Produktartikel aus 22 00:01:47,030 --> 00:01:51,020 dem Komponentenordner importieren. Gehen wir also hin und her, um 23 00:01:51,020 --> 00:01:57,090 einzukaufen und dann zu bestellen, nicht zu bestellen, sondern als Produktartikel, und geben Sie 24 00:01:57,230 --> 00:02:03,320 hier natürlich auch einige Daten ein. Jetzt sollten die Daten, die ich hier übergeben möchte, 25 00:02:03,320 --> 00:02:06,140 die Produkte sein, die meinem angemeldeten Benutzer gehörten. 26 00:02:06,140 --> 00:02:11,450 Wir haben im Moment keinen angemeldeten Benutzer, aber wenn Sie sich an den Produktreduzierer erinnern, täuschen 27 00:02:11,450 --> 00:02:17,300 wir dies vor, weil wir dort das Benutzerprodukt-Array haben, das alle Produkte enthält, die in diesem Fall 28 00:02:17,300 --> 00:02:25,130 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 29 00:02:25,130 --> 00:02:31,930 angemeldeten Benutzerdaten sind, später wird dies natürlich dynamisch sein. Das Benutzerprodukt ist also das, was wir 30 00:02:31,930 --> 00:02:37,930 brauchen. Zurück im Bildschirm für Benutzerprodukte müssen wir diese Daten daher mithilfe 31 00:02:37,930 --> 00:02:44,540 des Verwendungsselektors von React Redux von Redux abrufen. Hier erhalten wir unsere Benutzerprodukte, 32 00:02:44,560 --> 00:02:55,680 indem wir den Verwendungsselektor aufrufen, an dem wir übergeben In dieser Funktion erhält es den Status, greift dann auf den Produktteil unserer 33 00:02:55,680 --> 00:03:02,520 Geschäftsprodukte zu, da dies die Kennung ist, die ich dort verwende, und greift dann, 34 00:03:02,520 --> 00:03:10,590 wie ich gerade sagte, hier auf dieses Feld für Benutzerprodukte zu, also hier auf dem Bildschirm 35 00:03:10,590 --> 00:03:18,990 für Benutzerprodukte Zugriff . Benutzerprodukte. Benutzerprodukte sind jetzt das Array, das wir 36 00:03:18,990 --> 00:03:26,870 in Daten einspeisen. Wie immer werde ich hier einen Schlüsselextraktor hinzufügen, der mir die ID gibt, da mein Produkt, wie es hier 37 00:03:26,880 --> 00:03:31,860 in Benutzerprodukten gespeichert ist, am Ende natürlich mein Produktmodell verwendet und daher eine ID 38 00:03:31,860 --> 00:03:38,400 hat Eine eindeutige Kennung, die ich verwenden kann, damit ich sie verwenden kann. Dann müssen wir natürlich wie 39 00:03:38,400 --> 00:03:46,830 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 40 00:03:46,830 --> 00:03:53,130 Eintrag hier einen neuen Produktartikel zurückgeben, und der Produktartikel benötigt, wenn wir ihn uns ansehen, einige Informationen. 41 00:03:53,670 --> 00:04:05,790 Hier wird eine Detail-Requisite angezeigt, eine Titel-Requisite, eine Preis-Requisite, eine Bild-Requisite und dann auch eine 42 00:04:05,790 --> 00:04:07,300 On-Add-to-Cart-Requisite. 43 00:04:07,400 --> 00:04:12,840 Jetzt sehen Sie vielleicht schon, dass nicht alle diese Requisiten wirklich zu unserem Zweck passen, wenn wir 44 00:04:12,840 --> 00:04:18,840 sie auf dem Benutzerproduktbildschirm verwenden, da dies kein Bildschirm ist, auf dem wir nach Produkten suchen können. Dies ist 45 00:04:18,840 --> 00:04:26,310 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 46 00:04:26,310 --> 00:04:34,920 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 47 00:04:34,920 --> 00:04:39,310 folgt hinzuzufügen, aber wir müssen es fein abstimmen. 48 00:04:39,510 --> 00:04:46,170 Was wir also brauchen, ist Titel, Preis, Bild und Details zum Anzeigen sowie zum Hinzufügen eines Warenkorbs. 49 00:04:46,170 --> 00:04:53,430 Also brauchen wir das Bild hier und das ist natürlich itemData. Artikel. imageUrl, weil Sie 50 00:04:53,430 --> 00:04:59,400 diese itemData nicht vergessen dürfen. Element in den Endpunkten eines Produkts, wie 51 00:04:59,400 --> 00:05:08,540 hier im Modell definiert, daher haben wir diese imageUrl-Eigenschaft und dann benötigen wir hier auch den Titel, auf den über itemData 52 00:05:08,570 --> 00:05:17,840 zugegriffen werden kann. Artikel. Titel. Wir benötigen den Preis, auf den mit itemData zugegriffen werden kann. Artikel. Preis und wenn wir 53 00:05:17,840 --> 00:05:23,570 uns die Produktartikelkomponente ansehen, die alles erfüllt, was wir hier brauchen, aber jetzt müssen wir Details 54 00:05:23,570 --> 00:05:30,380 auf und in den Warenkorb legen und ich werde diese vorübergehend hinzufügen, aber wir müssen hier eine andere Lösung 55 00:05:30,380 --> 00:05:31,100 finden. 56 00:05:31,100 --> 00:05:34,290 In der Ansicht ist Detail im Moment 57 00:05:34,290 --> 00:05:41,760 eine leere Funktion und beim Hinzufügen zum Warenkorb auch eine leere Funktion, und wir werden dies später anders implementieren. 58 00:05:42,270 --> 00:05:47,370 Im Moment gebe ich hier jedoch einen Produktartikel aus und daher können 59 00:05:47,370 --> 00:05:54,600 wir jetzt zum Bildschirm für Benutzerprodukte navigieren. Um dorthin zu gelangen, ist es Zeit, zum Shop-Navigator zurückzukehren. 60 00:05:54,600 --> 00:06:00,420 Am Ende möchte ich sie meinem Schubladen-Navigator hinzufügen. Als separater Stapel sollte dies jedoch ebenso wie Produkte 61 00:06:00,420 --> 00:06:03,120 und Bestellungen ein separater Stapel sein . 62 00:06:03,120 --> 00:06:11,160 Wir können einfach den Auftragsnavigatorstapel hier kopieren, diesen replizieren und den Benutzerproduktbildschirm hier importieren, also den 63 00:06:11,160 --> 00:06:19,440 Benutzerproduktbildschirm aus dem Bildschirmordner, dort aus dem Benutzerordner und dann den Benutzerproduktbildschirm und diesen im neu kopierten 64 00:06:19,440 --> 00:06:27,180 Stapel dort unten zuordnen Ich werde den Bestellnavigator nicht benennen, da ich diesen Namen hier bereits 65 00:06:28,000 --> 00:06:35,140 habe, aber ich werde ihn nennen, sagen wir vielleicht Admin-Navigator, und hier habe ich 66 00:06:35,570 --> 00:06:43,900 meine Benutzerprodukt-ID, die auf den Benutzerproduktbildschirm zeigt. Jetzt hier als Symbol, in der Schublade möchte 67 00:06:43,920 --> 00:06:51,670 ich ein md erstellen und ios erstellen Symbol und anders als das sollte dies in Ordnung sein. 68 00:06:51,680 --> 00:06:55,460 Jetzt müssen wir nur noch diesen Navigator zu unserem Schubladen-Navigator hinzufügen. 69 00:06:55,460 --> 00:07:02,830 Dort füge ich den Admin-Schlüssel hinzu und zeige auf den Admin-Navigator. Jetzt sollten 70 00:07:02,830 --> 00:07:08,980 wir das tatsächlich erreichen können. Wenn wir zur App zurückkehren, haben wir 71 00:07:08,980 --> 00:07:14,080 den Administratoreintrag und wenn ich darauf klicke, erhalten wir ein Problem mit meinen Benutzerprodukten. 72 00:07:14,090 --> 00:07:19,880 Der Status undefiniert ist kein Objekt. Lassen Sie uns einen kurzen Blick auf den Benutzerproduktbildschirm werfen. 73 00:07:19,910 --> 00:07:25,880 Ja, das sollte seien Sie Produkte, weil unsere Scheibe hier im kombinierten Reduzierer Produkte genannt wird. 74 00:07:25,880 --> 00:07:27,990 Also hier sollten es 75 00:07:28,080 --> 00:07:34,590 auch Produkte sein, kleiner Tippfehler von meiner Seite. Jetzt sieht das besser aus und jetzt sieht es vielleicht so aus, als 76 00:07:34,590 --> 00:07:40,830 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 77 00:07:40,830 --> 00:07:42,910 Liste hier habe, aber mit weniger Produkten. 78 00:07:43,020 --> 00:07:47,190 Wenn Sie Android vergleichen, wo ich auf dem Startbildschirm bin, haben wir dort mehr Produkte, 79 00:07:47,190 --> 00:07:50,340 jetzt habe ich nur diejenigen, bei denen U1 die Besitzer-ID ist. 80 00:07:50,730 --> 00:07:51,550 Das ist 81 00:07:51,960 --> 00:07:54,850 gut so, aber natürlich mag ich diese Schaltflächen hier 82 00:07:54,930 --> 00:07:58,960 nicht und ich möchte hier natürlich auch einen Menüpunkt und einen Header-Titel haben. 83 00:07:58,980 --> 00:08:03,930 Es gibt einige Dinge, die wir beheben müssen. Diese Schaltflächen sind natürlich das Wichtigste oder 84 00:08:03,930 --> 00:08:08,270 das Auffälligste, was jedoch falsch ist. Trotzdem beginne ich mit 85 00:08:08,270 --> 00:08:11,420 der Kopfzeile. Im Bildschirm für Benutzerprodukte können 86 00:08:11,450 --> 00:08:19,910 wir die Navigationsoptionen und den Bildschirm für Benutzerprodukte hinzufügen. Navigationsoptionen und dort legen Sie beispielsweise einen Header-Titel 87 00:08:19,910 --> 00:08:30,130 Ihrer Produkte fest, und wir benötigen auch die Menüschaltfläche, damit wir tatsächlich auch zum Produktübersichtsbildschirm gehen und von dort 88 00:08:30,160 --> 00:08:35,930 diesen linken Header-Teil hier kopieren und zum Benutzerproduktbildschirm zurückkehren können 89 00:08:36,020 --> 00:08:39,620 und füge dies hier hinzu. 90 00:08:39,620 --> 00:08:44,900 Jetzt brauchen wir jedoch diese Funktionsform der Navigationsoptionen, in der wir am Ende ein 91 00:08:44,900 --> 00:08:50,210 Objekt mit allen darin enthaltenen Optionen zurückgeben. Das müssen wir also so ändern und 92 00:08:50,660 --> 00:08:55,880 wir müssen auch sicherstellen, dass wir die Header-Schaltflächen item und importieren Kopfzeile. 93 00:08:55,880 --> 00:09:00,300 Zurück im Produktübersichtsbildschirm habe ich diese Importe hier, kopiere sie 94 00:09:00,440 --> 00:09:03,310 aus dem Produktübersichtsbildschirm, gehe zum Benutzerproduktbildschirm 95 00:09:03,440 --> 00:09:05,990 und füge sie dort so 96 00:09:06,010 --> 00:09:09,050 hinzu, zum Beispiel, damit Sie alles importieren, 97 00:09:09,050 --> 00:09:10,940 was Sie brauchen. 98 00:09:10,940 --> 00:09:16,400 Wir müssen auch eine Plattform-API importieren, da wir diese auch beim Einrichten der Header-Schaltflächen verwenden. 99 00:09:18,210 --> 00:09:25,800 Zumindest, wenn wir in den Admin-Bereich gehen, haben wir hier unseren Titel, wir haben die Schublade, wieder die Menüschaltfläche, 100 00:09:25,800 --> 00:09:26,860 aber was 101 00:09:26,940 --> 00:09:29,250 ist nun mit diesen Schaltflächen hier? 102 00:09:29,310 --> 00:09:33,840 Wir müssen das Aussehen unseres Produkts ändern.