1 00:00:02,220 --> 00:00:06,510 Lassen Sie uns sicherstellen, dass wir zum Produktdetailbildschirm, diesem Bildschirm hier 2 00:00:06,510 --> 00:00:09,870 und zuallererst in der Produktdetailbildschirmkomponente gehen können. Nun, ich 3 00:00:09,870 --> 00:00:13,170 werde eine Komponente einrichten, indem ich React from 4 00:00:13,170 --> 00:00:15,590 React importiere. Dann brauchen 5 00:00:15,620 --> 00:00:21,150 wir dort wahrscheinlich auch einige Dinge von React Native, zum Beispiel kann es nicht 6 00:00:21,210 --> 00:00:26,940 wirklich schaden, hier eine Ansicht und einen Text sowie ein Stylesheet und auch die 7 00:00:27,150 --> 00:00:32,880 Bildkomponente zu haben, übrigens die Reihenfolge dieser Importe hier Natürlich spielt das keine Rolle. 8 00:00:32,890 --> 00:00:38,430 Ich möchte dort auch eine Schaltfläche haben, weil ich hier auch eine Schaltfläche zum Hinzufügen zum 9 00:00:38,610 --> 00:00:47,250 Warenkorb haben möchte, und eigentlich auch eine Bildlaufansicht, da diese Detailseite eine sehr lange Produktbeschreibung haben oder auf einem sehr kleinen Gerät angezeigt werden 10 00:00:47,250 --> 00:00:52,440 kann und Daher sollte es auf jeden Fall scrollbar sein, damit wir immer den 11 00:00:52,440 --> 00:00:55,950 gesamten Inhalt sehen können. Damit füge 12 00:00:55,950 --> 00:01:03,940 ich hier meine Produktdetail-Bildschirmkomponente hinzu, wieder eine Funktionskomponente, in der wir Requisiten erhalten. Hier richte 13 00:01:04,210 --> 00:01:10,420 ich mein Stylesheet mit Stylesheet ein. Erstellen und speichern Sie es in 14 00:01:10,420 --> 00:01:17,440 einer Stilkonstante und exportieren Sie standardmäßig den Produktdetailbildschirm. Beginnen wir einfach und geben hier eine Ansicht mit 15 00:01:17,500 --> 00:01:26,340 einem Text zurück, in dem der Produktdetailbildschirm angezeigt wird, der gerade vorhanden ist, damit wir sehen können, dass wir erfolgreich dorthin navigiert sind, und 16 00:01:26,340 --> 00:01:29,570 damit wir dies tatsächlich verwenden können, da wir jsx 17 00:01:29,610 --> 00:01:34,500 zurückgeben müssen Ich habe eine gültige Komponente, da ich als erstes die Navigation 18 00:01:34,500 --> 00:01:39,750 anpassen möchte und dies im ShopNavigator. js-Datei im Navigationsordner können wir 19 00:01:39,750 --> 00:01:42,290 den Produktdetailbildschirm hier aus unserem 20 00:01:42,420 --> 00:01:51,020 Bildschirmordner, dem Shopordner und dort dem Produktdetailbildschirm importieren. Das ist also die Datei, in der wir gerade 21 00:01:51,020 --> 00:01:51,760 gearbeitet 22 00:01:51,770 --> 00:01:58,750 haben, und ordnen dies hier einer Kennung zu. Ich werde es hier als 23 00:01:58,750 --> 00:01:59,830 Produktdetail bezeichnen. 24 00:01:59,830 --> 00:02:03,640 Diese Tasten, wie Sie im Navigationsbereich erfahren haben, liegen immer bei 25 00:02:03,640 --> 00:02:06,070 Ihnen. Jetzt haben wir diesen Bildschirm zugeordnet. 26 00:02:06,220 --> 00:02:09,570 Dies wird unser Startbildschirm sein, da dies das erste 27 00:02:09,580 --> 00:02:14,170 Schlüssel-Wert-Paar ist. Dies ist jedoch ein Bildschirm, zu dem wir gehen können. Wir können 28 00:02:14,170 --> 00:02:20,440 dorthin navigieren und dorthin gehen. Wir müssen zu unserem Produktübersichtsbildschirm gehen und wenn wir auf Ansicht klicken Detail, dies 29 00:02:20,440 --> 00:02:24,700 ist am Ende das Signal, dass wir zu diesem Produktdetailbildschirm gehen möchten. 30 00:02:24,700 --> 00:02:32,140 Hier in dieser Funktion können wir Requisiten-Navigationsnavigation aufrufen, diese Navigationsfunktion, die Sie im Navigationsabschnitt kennengelernt haben, und 31 00:02:32,140 --> 00:02:35,260 dort habe ich Ihnen eine Syntax 32 00:02:35,320 --> 00:02:40,170 gezeigt, bei der Sie ein Javascript-Objekt übergeben, in dem Sie 33 00:02:40,180 --> 00:02:46,340 einen Routennamen einrichten, der dies könnte Produktdetail sein und das bringt Sie zum Bildschirm. 34 00:02:46,340 --> 00:02:47,920 Jetzt speichern wir dies 35 00:02:47,930 --> 00:02:55,430 und klicken auf Details anzeigen. In der Tat gehen wir zum Produktdetailbildschirm. Als Anmerkung im Navigationsbereich habe ich Ihnen natürlich auch gezeigt, dass 36 00:02:55,430 --> 00:02:55,980 die 37 00:02:55,990 --> 00:03:02,270 alternative Syntax dazu darin besteht, dass Sie nur den Bildschirmnamen als erstes Argument für die Navigation übergeben, 38 00:03:02,270 --> 00:03:03,970 damit Sie dies auch 39 00:03:03,980 --> 00:03:09,080 tun können und es genauso funktioniert Gut. Wenn wir dies auch auf 40 00:03:09,080 --> 00:03:11,750 Android testen, können wir so dorthin gehen. 41 00:03:11,940 --> 00:03:19,410 Das Ziel ist natürlich nicht nur, dorthin zu gehen, sondern auch unsere Daten oder unsere ID des Produkts weiterzuleiten, damit wir 42 00:03:19,410 --> 00:03:25,200 die Produktdaten in die Komponente laden können. Daher übergebe ich hier als zweites Argument ein Javascript-Objekt, 43 00:03:25,710 --> 00:03:30,380 das meine Parameter für diese Navigationsaktion sein wird, und dort können Sie beliebige Schlüssel-Wert-Paare 44 00:03:30,510 --> 00:03:36,060 haben. Ich werde hier ein Produkt-ID-Feld hinzufügen. Auch dieser Name ist vollständig aber bis zu Ihnen und 45 00:03:36,090 --> 00:03:42,120 dies wird itemData sein. Artikel. id weil itemData. Artikel zeigt auf ein 46 00:03:42,120 --> 00:03:48,480 einzelnes Produkt, das das Aussehen hat, das wir hier in Modellen eingerichtet haben, und das über eine ID-Stütze verfügt. 47 00:03:48,480 --> 00:03:55,350 Daher können wir hier natürlich darauf zugreifen und es weiterleiten. Damit können wir im Produktdetailbildschirm dies natürlich 48 00:03:55,380 --> 00:04:01,410 extrahieren, das haben Sie auch schon früher gelernt und das können Sie hier einfach üben. 49 00:04:01,410 --> 00:04:11,880 Wir können unsere Produkt-ID hier erhalten, indem wir einfach die Requisitennavigation aufrufen und die param-Produkt-ID abrufen. Dadurch 50 00:04:11,880 --> 00:04:17,160 wird unsere Produkt-ID aus den erhaltenen Parametern extrahiert. 51 00:04:17,180 --> 00:04:22,580 Jetzt können wir diese ID verwenden, um unser Produkt zu erhalten, und natürlich werden unsere Produkte in Redux gespeichert. 52 00:04:22,640 --> 00:04:29,510 Am Ende müssen wir also den Verwendungsselektor hier aus React Redux importieren, damit wir damit ein einzelnes Produkt 53 00:04:29,510 --> 00:04:30,830 auswählen können. Unser 54 00:04:30,830 --> 00:04:37,220 ausgewähltes Produkt, dieser konstante Name liegt natürlich auch bei Ihnen, wird nun mit Hilfe ausgewählt Der Verwendungswähler, 55 00:04:37,220 --> 00:04:43,010 der unseren Status, unseren Redux-Status, erhält, und dann können wir in das Produkt-Slice bohren. In 56 00:04:43,070 --> 00:04:51,420 diesem Fall verwenden Sie hier wieder diesen Slice-Namen für kombinierte Reduzierer-Produkte, und dort können wir auf alle verfügbaren Produkte zugreifen, außer auf Natürlich 57 00:04:51,470 --> 00:04:54,650 möchte ich hier nicht alle verfügbaren Produkte laden, 58 00:04:54,680 --> 00:04:59,230 sondern kann stattdessen die Suchmethode verwenden, um ein einzelnes Produkt mit der 59 00:04:59,240 --> 00:05:06,650 von mir übergebenen Funktion zu finden, die für jedes Element im Array ausgeführt wird, in dem wir das Produkt erhalten, 60 00:05:06,650 --> 00:05:12,560 in dem diese Funktion enthalten ist Gibt true zurück und sollte true zurückgeben, wenn die ID 61 00:05:12,560 --> 00:05:18,290 des Produkts, das ich betrachte, der Produkt-ID entspricht, die ich aus den Routenparametern extrahiert habe. 62 00:05:18,290 --> 00:05:23,470 Auf diese Weise wählen wir ein einzelnes Produkt aus und dieses einzelne Produkt kann dann 63 00:05:23,470 --> 00:05:32,930 hier verwendet werden, sodass wir hier selectedProduct ausgeben können. Titel zum Beispiel. Wenn wir das jetzt speichern und die Details anzeigen, sehe ich 64 00:05:32,930 --> 00:05:33,860 hier tatsächlich 65 00:05:33,860 --> 00:05:37,970 ein rotes Hemd. Wenn ich das für den blauen Teppich mache, sehe ich hier 66 00:05:37,970 --> 00:05:41,590 einen blauen Teppich, also funktioniert das. Es wäre schön zu 67 00:05:41,720 --> 00:05:43,110 sehen, dass auch 68 00:05:43,280 --> 00:05:53,810 in der Kopfzeile und es gibt zwei Möglichkeiten, wir könnten jetzt Requisiten verwenden. Navigationssatzparameter hier und verpacken Sie diesen natürlich auch in den Aufruf zum Verwendungseffekt. Das 69 00:05:53,810 --> 00:05:55,030 wäre besser, wenn 70 00:05:55,030 --> 00:06:01,880 Sie unseren Titel mit Satzparameter setzen und ihn hier in den Navigationsoptionen verwenden, die wir den Produktdetails hinzufügen müssen, 71 00:06:01,880 --> 00:06:07,690 um ihn zu extrahieren, oder tatsächlich ein bisschen Einfacher gehen wir zur Produktübersicht, auf der wir 72 00:06:07,700 --> 00:06:12,710 zu dieser Seite gehen, und geben neben der Produkt-ID auch den Produkttitel weiter, da 73 00:06:12,710 --> 00:06:17,000 wir diesen hier leicht verfügbar haben und ihn mit Hilfe von 74 00:06:17,000 --> 00:06:20,120 itemData erhalten. Artikel. Titel. 75 00:06:20,150 --> 00:06:25,400 Jetzt setzen wir auch diesen Parameter und dies macht es super einfach, 76 00:06:25,820 --> 00:06:31,490 ihn im Produktdetailbildschirm zu extrahieren. Dort in den Navigationsoptionen können wir gerade jetzt 77 00:06:33,930 --> 00:06:40,440 Navigationsoptionen für den Produktdetailbildschirm hinzufügen. Dies ist jetzt die funktionale Form, da wir sie extrahieren müssen 78 00:06:41,730 --> 00:06:48,390 Dies auf dynamische Weise von unseren Routenparametern. Hier erhalten wir also dieses Navigationsdatenobjekt, das 79 00:06:48,420 --> 00:06:55,590 auch eine Navigationsstütze hat. Wir müssen unser Javascript-Objekt und unser Konfigurationsobjekt für Navigationsoptionen hier zurückgeben. Dies sollten natürlich 80 00:06:55,620 --> 00:07:07,770 Optionen sein. Dort können wir den Headertitel auf navData setzen. Navigation. getParam-Produkttitel oder was auch immer Sie als 81 00:07:07,830 --> 00:07:11,170 Kennung dafür gewählt haben. 82 00:07:11,190 --> 00:07:17,060 Hier verwende ich also den Produkttitel, da ich diesen im Produktübersichtsbildschirm auf den Produkttitel setze. 83 00:07:19,600 --> 00:07:25,600 Damit setzen wir diesen Header. Mal sehen, ob das funktioniert. Wenn wir versuchen, zu diesem Bildschirm zu gelangen, sieht 84 00:07:25,900 --> 00:07:27,130 das gut aus. 85 00:07:27,130 --> 00:07:34,560 Jetzt sehen wir auch den Titel des Produkts hier im Header. Das funktioniert. 86 00:07:34,560 --> 00:07:39,420 Jetzt habe ich bereits erwähnt, dass wir nicht nur durch Drücken von Ansichtsdetails dorthin gehen 87 00:07:39,420 --> 00:07:41,840 können sollten, sondern möglicherweise auch durch Drücken 88 00:07:42,170 --> 00:07:47,930 des Produkts im Allgemeinen. Dazu können wir zum Produktartikel gehen und dort haben wir natürlich die Schaltfläche 89 00:07:47,930 --> 00:07:51,310 Detail anzeigen Jetzt können wir natürlich das gesamte Objekt in 90 00:07:51,440 --> 00:08:01,000 eine berührbare Deckkraft einwickeln und dort können wir die berührbare Deckkraft verwenden und das gesamte Objekt mit berührbarer Deckkraft umwickeln. Wickeln Sie dies also um unsere gesamte Ansicht hier. 91 00:08:01,160 --> 00:08:04,430 Diese Schaltflächen werden weiterhin eigenständig ausgelöst, aber jetzt können 92 00:08:04,430 --> 00:08:09,110 wir auch drücken Überall sonst und dort auf Press, möchte ich jetzt auch das 93 00:08:09,130 --> 00:08:09,900 Gleiche 94 00:08:09,920 --> 00:08:15,710 auslösen, die Schaltfläche Details anzeigen, ich möchte die Funktion auslösen, die wir für Details der Ansicht erhalten, 95 00:08:15,740 --> 00:08:22,730 also werde ich diese einfach an Details der Ansicht weiterleiten. Und dass wir mit dieser einfachen Änderung überall 96 00:08:22,730 --> 00:08:28,970 auf dieses Element drücken können, um zum Detailbildschirm zu gelangen, auch auf Android, wo dies jedoch 97 00:08:28,970 --> 00:08:34,080 etwas hässlich aussieht und es im Allgemeinen schön wäre, diesen Welleneffekt dort zu haben. 98 00:08:34,220 --> 00:08:36,980 Jetzt haben Sie auch gelernt, wie Sie 99 00:08:37,070 --> 00:08:44,760 dies implementieren können. Wir müssen dafür berührbares natives Feedback und die Plattform-API importieren, damit wir dieses Plattformobjekt und 100 00:08:44,760 --> 00:08:52,980 jetzt hier im Produktelement unsere berührbare Komponente hier einrichten können oder wie auch immer Sie es benennen möchten , sollte 101 00:08:52,980 --> 00:08:58,650 jedoch einen Großbuchstaben haben, damit wir es als jsx-Element verwenden können, und dies 102 00:08:58,660 --> 00:09:00,710 zeigt standardmäßig auf berührbare 103 00:09:00,720 --> 00:09:10,050 Deckkraft, sagen wir aber, wenn das Plattformbetriebssystem gleich Android ist und die Plattformversion größer oder gleich 21 ist, ist dies die Android-Version 104 00:09:10,050 --> 00:09:13,240 Wir müssen den Ripple-Effekt unterstützen, wir können 105 00:09:13,440 --> 00:09:22,410 berührbares cmp gleich berührbares natives Feedback setzen und jetzt können wir berührbare Deckkraft dort unten durch berührbares cmp ersetzen, also durch 106 00:09:22,410 --> 00:09:23,100 diese 107 00:09:24,210 --> 00:09:28,120 Variable, die zwei verschiedene Arten von Komponenten enthält, je 108 00:09:28,220 --> 00:09:34,040 nachdem, wo sie ausgeführt wird und jetzt, wenn wir Wenn Sie dies tun, haben 109 00:09:34,850 --> 00:09:40,330 wir hier immer noch diesen Deckkrafteffekt, aber wir haben einen Welleneffekt auf Android. 110 00:09:40,340 --> 00:09:48,980 Allerdings nur dort unten, nicht auf dem Bild und auch nicht unsere abgerundeten Ecken zu respektieren, wie Sie vielleicht 111 00:09:48,980 --> 00:09:49,930 sehen können. 112 00:09:50,390 --> 00:09:52,770 Um das Problem zu beheben, 113 00:09:52,850 --> 00:09:56,500 das nicht auf dem Image zu sehen ist, müssen wir 114 00:09:56,690 --> 00:10:01,990 nur einige Konfigurationen dort ändern. Wir müssen hier nur die Verwendung der Vordergrund-Requisite hinzufügen. 115 00:10:02,050 --> 00:10:07,570 Bei berührbarer Deckkraft hat dies keine Auswirkung, aber bei berührbarem nativem Feedback wird sichergestellt, 116 00:10:07,570 --> 00:10:12,850 dass der Welligkeitseffekt nicht auf den Hintergrund, sondern tatsächlich auf den Vordergrund angewendet 117 00:10:12,910 --> 00:10:19,180 wird, dh auch auf Elemente, die über unserer berührbaren oder innerhalb von angeordnet sind unsere berührbare Komponente. 118 00:10:19,180 --> 00:10:25,360 Deshalb ist dies jetzt auch auf dem Bild und um die Ecken, die abgerundeten Ecken zu 119 00:10:25,360 --> 00:10:27,560 respektieren, mache ich das tatsächlich 120 00:10:27,670 --> 00:10:33,840 ein bisschen anders, ich füge eine berührbare Komponente innerhalb meiner Umgebungsansicht hinzu, anstatt außerhalb, so und 121 00:10:35,550 --> 00:10:42,860 jetzt Hier füge ich einen Überlauf hinzu, der in diesem Produktstil verborgen ist, der sich in dieser Ansicht befindet, die 122 00:10:42,870 --> 00:10:48,260 sich jetzt um meine berührbare Komponente befindet. Damit geht jedoch mein Schatten verloren, wie Sie sehen können, 123 00:10:48,260 --> 00:10:55,710 und hier erhalte ich jetzt sogar den Fehler, dass ich ein einzelnes React-Kind brauche. Lassen Sie uns dies daher ein wenig optimieren 124 00:10:55,710 --> 00:11:01,590 und hier eine zusätzliche Ansicht hinzufügen, eine zusätzliche Ansicht, die alles einschließt, meine 125 00:11:01,590 --> 00:11:11,370 gesamte berührbare Komponente innerhalb dieser äußeren Ansicht, und in dieser zusätzlichen Ansicht füge ich einen Stil von berührbaren Stilen oder was auch immer 126 00:11:11,370 --> 00:11:19,090 hinzu Sie möchten es benennen und dieser berührbare Stil wird jetzt hier unten in meinem Stylesheet hinzugefügt. 127 00:11:19,180 --> 00:11:21,260 Dies bringt jetzt die versteckte 128 00:11:21,370 --> 00:11:28,090 Überlaufstütze, also fügen wir diese hier hinzu und diese erhält jetzt auch den gleichen Randradius, den wir auf dem 129 00:11:28,090 --> 00:11:36,000 gesamten Wagen haben, also einen Randradius von 10 hier und dies stellt nun sicher, dass wir unseren Schatten behalten, so dass immer noch 130 00:11:36,000 --> 00:11:41,220 funktioniert, weil ein versteckter Überlauf dies beschnitten hätte. Um diesen anderen Fehler auch hier zu 131 00:11:41,220 --> 00:11:47,230 beseitigen, können wir einfach eine weitere Ansicht um den gesamten Inhalt einer berührbaren Komponente wickeln, sodass wir 132 00:11:47,240 --> 00:11:52,890 diese Kriterien erfüllen, nur ein untergeordnetes Element zu haben In berührbaren Komponenten und jetzt damit haben 133 00:11:52,890 --> 00:11:58,620 wir das gleiche Verhalten wie zuvor unter iOS. Übrigens löst ein Warenkorb diese Detailnavigation nicht 134 00:11:58,620 --> 00:12:01,940 aus, was gut ist, und unter Android haben wir 135 00:12:02,070 --> 00:12:06,780 jetzt auch den Welleneffekt, der unsere abgerundeten Ecken berücksichtigt, der uns zur Detailansicht 136 00:12:07,050 --> 00:12:12,270 führt, und ein Warenkorb macht auch nicht das, was er nicht tun sollte . 137 00:12:12,270 --> 00:12:15,050 Damit haben wir jetzt die Navigation, die wir brauchen, und 138 00:12:15,060 --> 00:12:17,210 das Aussehen, das wir hier brauchen. 139 00:12:17,490 --> 00:12:23,490 Jetzt können wir zur Detailseite gehen und sollten jetzt vielleicht sicherstellen, dass diese Detailseite auch so aussieht, wie sie aussehen 140 00:12:23,490 --> 00:12:24,020 sollte.