Derzeit sind in unserer Produktartikelkomponente hier im Komponentenordner die Schaltflächen Teil der Komponente, ebenso wie
die umhüllbare berührbare Komponente.
Wir können die berührbare Komponente nicht so stark ändern, da sie zu unserem Inhalt gehört, und das
ist auch kein großes Problem, da ich auf dem Administrationsbildschirm hier auch möchte, dass die Elemente
berührbar sind, aber ich möchte darin zu meinem Bearbeitungsbildschirm wechseln Fall.
Ich möchte auch zwei Schaltflächen haben - eine zum
Bearbeiten und eine zum Löschen, aber natürlich sollten die Beschriftungen und Aktionen unterschiedlich sein.
Jetzt können wir diesen Beschriftungstext hier als Requisiten übergeben und die Requisiten, die wir auslösen, wenn die Tasten allgemeiner
gedrückt werden, umbenennen, damit wir sie zum Anzeigen der Details auf dem
Produktübersichtsbildschirm und zum Bearbeiten oder Löschen verwenden können der Benutzerproduktbildschirm. Es gibt auch eine alternative Möglichkeit, damit
umzugehen.
Wenn wir diese Komponente im Allgemeinen drücken, benenne ich sie in select um, um einen allgemeineren Namen zu erhalten, der in einer
breiteren Palette von Anwendungsfällen sinnvoll ist, und ich ändere auch die Art
und Weise, wie wir diese Schaltflächen hier erhalten.
Ich schneide sie von hier aus und gebe stattdessen Requisitenkinder hier aus. Dies ist die spezielle Requisite, die sich auf alles bezieht,
was wir zwischen dem öffnenden und schließenden Tag unserer eigenen Komponente passieren. Jetzt kann ich auch den Farbimport hier und den
Schaltflächenimport loswerden und jetzt zu den Stellen
gehen, an denen wir das
Produktelement verwenden, das wäre beispielsweise der Produktübersichtsbildschirm.
Dort müssen wir nun die Schaltflächenkomponente importieren und sicherstellen, dass Sie Ihre
Farben importieren. Importieren
Sie also Farben aus Konstantenfarben. Wechseln Sie nun zu Ihrem Produktelement und ändern Sie es von einer selbstschließenden Komponente
in eine Komponente, die Sie mit
Ihrer schließen und öffnen eigene Komponenten-Tags. Zwischen diesen Tags können Sie diese beiden
Schaltflächen jetzt erneut hinzufügen. Verwenden Sie jetzt natürlich keine Requisiten zum Anzeigen von Details und Requisiten zum Hinzufügen zum Warenkorb, sondern
fügen Sie stattdessen Ihre Logik hier hinzu, da wir dies jetzt dynamisch übergeben In
der Produktartikelkomponente können wir jedoch unterschiedliche Schaltflächen übergeben, je
nachdem, wo wir diese Produktartikelkomponente verwenden. Jetzt füge ich hier einen neuen Handler
hinzu, wähle zum Beispiel einen Item-Handler aus, der nur eine Funktion ist, die in einer Konstanten wie dieser gespeichert ist, und dort möchte ich das tun, was ich zuvor
bei Ansichtsdetails getan habe. Ich schneide das aus und füge
es hier hinzu und ich erwarte, die ID und den Titel hier als Argument zu erhalten, damit ich ID
und Titel hier wie folgt weiterleiten kann und jetzt den Artikelhandler auswählen
kann, den ich hier bei Auswahl auslösen möchte. Denken Sie daran, dass ich dies im Produktartikel umbenannt habe Diese berührbare Funktion wird jetzt
nur bei Auswahl ausgelöst. Sie müssen sie also an den Stellen umbenennen,
an denen Sie diese Komponente verwenden, wie hier und dann hier. Ich führe hier meinen Handler für ausgewählte Elemente aus
und leite itemData weiter. Artikel. id und itemData. Artikel. Titel hier,
damit diese Daten in dieser Funktion landen. Ich mache das, weil ich jetzt den gleichen
Item-Handler hier auf dieser Schaltfläche mit Ansichtsdetails verwenden kann. Ich kann diese anonyme Funktion im Wesentlichen einfach kopieren und hier zu
diesem onPress-Handler dieser Schaltfläche hinzufügen. Jetzt verwenden
wir das wieder und fügen es hinzu Warenkorb, nun
da versenden wir dies, dies
wird jetzt hier aus der Produktartikelkomponente entfernt, da wir dort nicht mehr diese Requisite
haben, stattdessen ist es jetzt hier, diese Requisite, die diese anonyme Funktion übernimmt, die dann am Ende diese Aktion
versenden sollte.
Die wichtigste Änderung besteht nun darin, dass ich die Schaltflächen aus der Komponente, der Produktartikelkomponente in die
Produktübersichtsbildschirmkomponente verschiebe. Dadurch können wir immer noch das Gleiche tun wie zuvor. Wenn ich das
speichere, sollte dies weiterhin funktionieren Vor. Wir können auf einen Artikel tippen, wir
können auf Details tippen, wir können auf Warenkorb tippen und das alles
funktioniert, aber jetzt können wir dies auch im Benutzerproduktbildschirm anpassen.
Dort kopiere ich auch diese Schaltflächen und gehe zum Benutzerproduktbildschirm. Dort importiere ich die Schaltfläche aus React Native, importiere unsere Farbkonstante,
da wir diese für die Schaltflächen aus Konstantenfarben und dann hier im Produktelement benötigen Anstatt dies einzurichten, müssen wir
unsere On-Select-Requisite analysieren, wenn auf das Element im Allgemeinen getippt wird. Jetzt fügen wir auch Öffnungs- und Schließ-Tags für unsere eigene benutzerdefinierte Komponente
hinzu und fügen
hier erneut unsere Schaltflächen hinzu, anstatt jetzt Details
anzuzeigen Ich sage Bearbeiten
und Löschen und im Moment kann ich einfach alle andere Logik entfernen, da wir
im Moment keine Logik zum Bearbeiten und Löschen haben, aber
das können wir später hinzufügen.
Und hier für on select ist es im Moment auch nur eine leere Funktion.
Dies hat den Vorteil, dass wir jetzt unsere Artikel wie zuvor hier haben, aber im Admin-Bereich haben wir jetzt das
Bearbeiten und Löschen und dies ermöglicht
es uns, verschiedene Dinge zu tun, indem wir die Produktartikelkomponente immer noch wiederverwenden, was natürlich sehr
schön ist.