Lassen Sie uns sicherstellen, dass wir zum Produktdetailbildschirm, diesem Bildschirm hier
und zuallererst in der Produktdetailbildschirmkomponente gehen können. Nun, ich
werde eine Komponente einrichten, indem ich React from
React importiere. Dann brauchen
wir dort wahrscheinlich auch einige Dinge von React Native, zum Beispiel kann es nicht
wirklich schaden, hier eine Ansicht und einen Text sowie ein Stylesheet und auch die
Bildkomponente zu haben, übrigens die Reihenfolge dieser Importe hier Natürlich spielt das keine Rolle.
Ich möchte dort auch eine Schaltfläche haben, weil ich hier auch eine Schaltfläche zum Hinzufügen zum
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
kann und Daher sollte es auf jeden Fall scrollbar sein, damit wir immer den
gesamten Inhalt sehen können. Damit füge
ich hier meine Produktdetail-Bildschirmkomponente hinzu, wieder eine Funktionskomponente, in der wir Requisiten erhalten. Hier richte
ich mein Stylesheet mit Stylesheet ein. Erstellen und speichern Sie es in
einer Stilkonstante und exportieren Sie standardmäßig den Produktdetailbildschirm. Beginnen wir einfach und geben hier eine Ansicht mit
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
damit wir dies tatsächlich verwenden können, da wir jsx
zurückgeben müssen Ich habe eine gültige Komponente, da ich als erstes die Navigation
anpassen möchte und dies im ShopNavigator. js-Datei im Navigationsordner können wir
den Produktdetailbildschirm hier aus unserem
Bildschirmordner, dem Shopordner und dort dem Produktdetailbildschirm importieren. Das ist also die Datei, in der wir gerade
gearbeitet
haben, und ordnen dies hier einer Kennung zu. Ich werde es hier als
Produktdetail bezeichnen.
Diese Tasten, wie Sie im Navigationsbereich erfahren haben, liegen immer bei
Ihnen. Jetzt haben wir diesen Bildschirm zugeordnet.
Dies wird unser Startbildschirm sein, da dies das erste
Schlüssel-Wert-Paar ist. Dies ist jedoch ein Bildschirm, zu dem wir gehen können. Wir können
dorthin navigieren und dorthin gehen. Wir müssen zu unserem Produktübersichtsbildschirm gehen und wenn wir auf Ansicht klicken Detail, dies
ist am Ende das Signal, dass wir zu diesem Produktdetailbildschirm gehen möchten.
Hier in dieser Funktion können wir Requisiten-Navigationsnavigation aufrufen, diese Navigationsfunktion, die Sie im Navigationsabschnitt kennengelernt haben, und
dort habe ich Ihnen eine Syntax
gezeigt, bei der Sie ein Javascript-Objekt übergeben, in dem Sie
einen Routennamen einrichten, der dies könnte Produktdetail sein und das bringt Sie zum Bildschirm.
Jetzt speichern wir dies
und klicken auf Details anzeigen. In der Tat gehen wir zum Produktdetailbildschirm. Als Anmerkung im Navigationsbereich habe ich Ihnen natürlich auch gezeigt, dass
die
alternative Syntax dazu darin besteht, dass Sie nur den Bildschirmnamen als erstes Argument für die Navigation übergeben,
damit Sie dies auch
tun können und es genauso funktioniert Gut. Wenn wir dies auch auf
Android testen, können wir so dorthin gehen.
Das Ziel ist natürlich nicht nur, dorthin zu gehen, sondern auch unsere Daten oder unsere ID des Produkts weiterzuleiten, damit wir
die Produktdaten in die Komponente laden können. Daher übergebe ich hier als zweites Argument ein Javascript-Objekt,
das meine Parameter für diese Navigationsaktion sein wird, und dort können Sie beliebige Schlüssel-Wert-Paare
haben. Ich werde hier ein Produkt-ID-Feld hinzufügen. Auch dieser Name ist vollständig aber bis zu Ihnen und
dies wird itemData sein. Artikel. id weil itemData. Artikel zeigt auf ein
einzelnes Produkt, das das Aussehen hat, das wir hier in Modellen eingerichtet haben, und das über eine ID-Stütze verfügt.
Daher können wir hier natürlich darauf zugreifen und es weiterleiten. Damit können wir im Produktdetailbildschirm dies natürlich
extrahieren, das haben Sie auch schon früher gelernt und das können Sie hier einfach üben.
Wir können unsere Produkt-ID hier erhalten, indem wir einfach die Requisitennavigation aufrufen und die param-Produkt-ID abrufen. Dadurch
wird unsere Produkt-ID aus den erhaltenen Parametern extrahiert.
Jetzt können wir diese ID verwenden, um unser Produkt zu erhalten, und natürlich werden unsere Produkte in Redux gespeichert.
Am Ende müssen wir also den Verwendungsselektor hier aus React Redux importieren, damit wir damit ein einzelnes Produkt
auswählen können. Unser
ausgewähltes Produkt, dieser konstante Name liegt natürlich auch bei Ihnen, wird nun mit Hilfe ausgewählt Der Verwendungswähler,
der unseren Status, unseren Redux-Status, erhält, und dann können wir in das Produkt-Slice bohren. In
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
möchte ich hier nicht alle verfügbaren Produkte laden,
sondern kann stattdessen die Suchmethode verwenden, um ein einzelnes Produkt mit der
von mir übergebenen Funktion zu finden, die für jedes Element im Array ausgeführt wird, in dem wir das Produkt erhalten,
in dem diese Funktion enthalten ist Gibt true zurück und sollte true zurückgeben, wenn die ID
des Produkts, das ich betrachte, der Produkt-ID entspricht, die ich aus den Routenparametern extrahiert habe.
Auf diese Weise wählen wir ein einzelnes Produkt aus und dieses einzelne Produkt kann dann
hier verwendet werden, sodass wir hier selectedProduct ausgeben können. Titel zum Beispiel. Wenn wir das jetzt speichern und die Details anzeigen, sehe ich
hier tatsächlich
ein rotes Hemd. Wenn ich das für den blauen Teppich mache, sehe ich hier
einen blauen Teppich, also funktioniert das. Es wäre schön zu
sehen, dass auch
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
wäre besser, wenn
Sie unseren Titel mit Satzparameter setzen und ihn hier in den Navigationsoptionen verwenden, die wir den Produktdetails hinzufügen müssen,
um ihn zu extrahieren, oder tatsächlich ein bisschen Einfacher gehen wir zur Produktübersicht, auf der wir
zu dieser Seite gehen, und geben neben der Produkt-ID auch den Produkttitel weiter, da
wir diesen hier leicht verfügbar haben und ihn mit Hilfe von
itemData erhalten. Artikel. Titel.
Jetzt setzen wir auch diesen Parameter und dies macht es super einfach,
ihn im Produktdetailbildschirm zu extrahieren. Dort in den Navigationsoptionen können wir gerade jetzt
Navigationsoptionen für den Produktdetailbildschirm hinzufügen. Dies ist jetzt die funktionale Form, da wir sie extrahieren müssen
Dies auf dynamische Weise von unseren Routenparametern. Hier erhalten wir also dieses Navigationsdatenobjekt, das
auch eine Navigationsstütze hat. Wir müssen unser Javascript-Objekt und unser Konfigurationsobjekt für Navigationsoptionen hier zurückgeben. Dies sollten natürlich
Optionen sein. Dort können wir den Headertitel auf navData setzen. Navigation. getParam-Produkttitel oder was auch immer Sie als
Kennung dafür gewählt haben.
Hier verwende ich also den Produkttitel, da ich diesen im Produktübersichtsbildschirm auf den Produkttitel setze.
Damit setzen wir diesen Header. Mal sehen, ob das funktioniert. Wenn wir versuchen, zu diesem Bildschirm zu gelangen, sieht
das gut aus.
Jetzt sehen wir auch den Titel des Produkts hier im Header. Das funktioniert.
Jetzt habe ich bereits erwähnt, dass wir nicht nur durch Drücken von Ansichtsdetails dorthin gehen
können sollten, sondern möglicherweise auch durch Drücken
des Produkts im Allgemeinen. Dazu können wir zum Produktartikel gehen und dort haben wir natürlich die Schaltfläche
Detail anzeigen Jetzt können wir natürlich das gesamte Objekt in
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.
Diese Schaltflächen werden weiterhin eigenständig ausgelöst, aber jetzt können
wir auch drücken Überall sonst und dort auf Press, möchte ich jetzt auch das
Gleiche
auslösen, die Schaltfläche Details anzeigen, ich möchte die Funktion auslösen, die wir für Details der Ansicht erhalten,
also werde ich diese einfach an Details der Ansicht weiterleiten. Und dass wir mit dieser einfachen Änderung überall
auf dieses Element drücken können, um zum Detailbildschirm zu gelangen, auch auf Android, wo dies jedoch
etwas hässlich aussieht und es im Allgemeinen schön wäre, diesen Welleneffekt dort zu haben.
Jetzt haben Sie auch gelernt, wie Sie
dies implementieren können. Wir müssen dafür berührbares natives Feedback und die Plattform-API importieren, damit wir dieses Plattformobjekt und
jetzt hier im Produktelement unsere berührbare Komponente hier einrichten können oder wie auch immer Sie es benennen möchten , sollte
jedoch einen Großbuchstaben haben, damit wir es als jsx-Element verwenden können, und dies
zeigt standardmäßig auf berührbare
Deckkraft, sagen wir aber, wenn das Plattformbetriebssystem gleich Android ist und die Plattformversion größer oder gleich 21 ist, ist dies die Android-Version
Wir müssen den Ripple-Effekt unterstützen, wir können
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
diese
Variable, die zwei verschiedene Arten von Komponenten enthält, je
nachdem, wo sie ausgeführt wird und jetzt, wenn wir Wenn Sie dies tun, haben
wir hier immer noch diesen Deckkrafteffekt, aber wir haben einen Welleneffekt auf Android.
Allerdings nur dort unten, nicht auf dem Bild und auch nicht unsere abgerundeten Ecken zu respektieren, wie Sie vielleicht
sehen können.
Um das Problem zu beheben,
das nicht auf dem Image zu sehen ist, müssen wir
nur einige Konfigurationen dort ändern. Wir müssen hier nur die Verwendung der Vordergrund-Requisite hinzufügen.
Bei berührbarer Deckkraft hat dies keine Auswirkung, aber bei berührbarem nativem Feedback wird sichergestellt,
dass der Welligkeitseffekt nicht auf den Hintergrund, sondern tatsächlich auf den Vordergrund angewendet
wird, dh auch auf Elemente, die über unserer berührbaren oder innerhalb von angeordnet sind unsere berührbare Komponente.
Deshalb ist dies jetzt auch auf dem Bild und um die Ecken, die abgerundeten Ecken zu
respektieren, mache ich das tatsächlich
ein bisschen anders, ich füge eine berührbare Komponente innerhalb meiner Umgebungsansicht hinzu, anstatt außerhalb, so und
jetzt Hier füge ich einen Überlauf hinzu, der in diesem Produktstil verborgen ist, der sich in dieser Ansicht befindet, die
sich jetzt um meine berührbare Komponente befindet. Damit geht jedoch mein Schatten verloren, wie Sie sehen können,
und hier erhalte ich jetzt sogar den Fehler, dass ich ein einzelnes React-Kind brauche. Lassen Sie uns dies daher ein wenig optimieren
und hier eine zusätzliche Ansicht hinzufügen, eine zusätzliche Ansicht, die alles einschließt, meine
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
hinzu Sie möchten es benennen und dieser berührbare Stil wird jetzt hier unten in meinem Stylesheet hinzugefügt.
Dies bringt jetzt die versteckte
Überlaufstütze, also fügen wir diese hier hinzu und diese erhält jetzt auch den gleichen Randradius, den wir auf dem
gesamten Wagen haben, also einen Randradius von 10 hier und dies stellt nun sicher, dass wir unseren Schatten behalten, so dass immer noch
funktioniert, weil ein versteckter Überlauf dies beschnitten hätte. Um diesen anderen Fehler auch hier zu
beseitigen, können wir einfach eine weitere Ansicht um den gesamten Inhalt einer berührbaren Komponente wickeln, sodass wir
diese Kriterien erfüllen, nur ein untergeordnetes Element zu haben In berührbaren Komponenten und jetzt damit haben
wir das gleiche Verhalten wie zuvor unter iOS. Übrigens löst ein Warenkorb diese Detailnavigation nicht
aus, was gut ist, und unter Android haben wir
jetzt auch den Welleneffekt, der unsere abgerundeten Ecken berücksichtigt, der uns zur Detailansicht
führt, und ein Warenkorb macht auch nicht das, was er nicht tun sollte .
Damit haben wir jetzt die Navigation, die wir brauchen, und
das Aussehen, das wir hier brauchen.
Jetzt können wir zur Detailseite gehen und sollten jetzt vielleicht sicherstellen, dass diese Detailseite auch so aussieht, wie sie aussehen
sollte.