1 00:00:02,120 --> 00:00:08,560 Derzeit sind in unserer Produktartikelkomponente hier im Komponentenordner die Schaltflächen Teil der Komponente, ebenso wie 2 00:00:08,580 --> 00:00:10,660 die umhüllbare berührbare Komponente. 3 00:00:12,480 --> 00:00:18,990 Wir können die berührbare Komponente nicht so stark ändern, da sie zu unserem Inhalt gehört, und das 4 00:00:18,990 --> 00:00:25,200 ist auch kein großes Problem, da ich auf dem Administrationsbildschirm hier auch möchte, dass die Elemente 5 00:00:25,590 --> 00:00:30,210 berührbar sind, aber ich möchte darin zu meinem Bearbeitungsbildschirm wechseln Fall. 6 00:00:30,360 --> 00:00:33,530 Ich möchte auch zwei Schaltflächen haben - eine zum 7 00:00:33,540 --> 00:00:37,710 Bearbeiten und eine zum Löschen, aber natürlich sollten die Beschriftungen und Aktionen unterschiedlich sein. 8 00:00:38,370 --> 00:00:46,150 Jetzt können wir diesen Beschriftungstext hier als Requisiten übergeben und die Requisiten, die wir auslösen, wenn die Tasten allgemeiner 9 00:00:46,150 --> 00:00:50,880 gedrückt werden, umbenennen, damit wir sie zum Anzeigen der Details auf dem 10 00:00:50,920 --> 00:00:59,500 Produktübersichtsbildschirm und zum Bearbeiten oder Löschen verwenden können der Benutzerproduktbildschirm. Es gibt auch eine alternative Möglichkeit, damit 11 00:00:59,500 --> 00:01:00,320 umzugehen. 12 00:01:00,370 --> 00:01:07,720 Wenn wir diese Komponente im Allgemeinen drücken, benenne ich sie in select um, um einen allgemeineren Namen zu erhalten, der in einer 13 00:01:07,720 --> 00:01:12,000 breiteren Palette von Anwendungsfällen sinnvoll ist, und ich ändere auch die Art 14 00:01:12,770 --> 00:01:15,810 und Weise, wie wir diese Schaltflächen hier erhalten. 15 00:01:15,890 --> 00:01:22,310 Ich schneide sie von hier aus und gebe stattdessen Requisitenkinder hier aus. Dies ist die spezielle Requisite, die sich auf alles bezieht, 16 00:01:22,310 --> 00:01:29,560 was wir zwischen dem öffnenden und schließenden Tag unserer eigenen Komponente passieren. Jetzt kann ich auch den Farbimport hier und den 17 00:01:29,560 --> 00:01:32,540 Schaltflächenimport loswerden und jetzt zu den Stellen 18 00:01:32,830 --> 00:01:35,180 gehen, an denen wir das 19 00:01:35,230 --> 00:01:38,010 Produktelement verwenden, das wäre beispielsweise der Produktübersichtsbildschirm. 20 00:01:38,290 --> 00:01:44,100 Dort müssen wir nun die Schaltflächenkomponente importieren und sicherstellen, dass Sie Ihre 21 00:01:44,110 --> 00:01:46,150 Farben importieren. Importieren 22 00:01:48,490 --> 00:01:57,630 Sie also Farben aus Konstantenfarben. Wechseln Sie nun zu Ihrem Produktelement und ändern Sie es von einer selbstschließenden Komponente 23 00:01:57,630 --> 00:02:00,450 in eine Komponente, die Sie mit 24 00:02:00,450 --> 00:02:06,090 Ihrer schließen und öffnen eigene Komponenten-Tags. Zwischen diesen Tags können Sie diese beiden 25 00:02:06,090 --> 00:02:13,680 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 26 00:02:13,680 --> 00:02:18,690 fügen Sie stattdessen Ihre Logik hier hinzu, da wir dies jetzt dynamisch übergeben In 27 00:02:18,690 --> 00:02:21,950 der Produktartikelkomponente können wir jedoch unterschiedliche Schaltflächen übergeben, je 28 00:02:21,960 --> 00:02:26,970 nachdem, wo wir diese Produktartikelkomponente verwenden. Jetzt füge ich hier einen neuen Handler 29 00:02:29,840 --> 00:02:39,030 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 30 00:02:39,140 --> 00:02:42,280 bei Ansichtsdetails getan habe. Ich schneide das aus und füge 31 00:02:42,350 --> 00:02:48,440 es hier hinzu und ich erwarte, die ID und den Titel hier als Argument zu erhalten, damit ich ID 32 00:02:48,440 --> 00:02:52,350 und Titel hier wie folgt weiterleiten kann und jetzt den Artikelhandler auswählen 33 00:02:52,610 --> 00:02:59,860 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 34 00:02:59,870 --> 00:03:03,590 nur bei Auswahl ausgelöst. Sie müssen sie also an den Stellen umbenennen, 35 00:03:03,590 --> 00:03:09,770 an denen Sie diese Komponente verwenden, wie hier und dann hier. Ich führe hier meinen Handler für ausgewählte Elemente aus 36 00:03:09,770 --> 00:03:17,360 und leite itemData weiter. Artikel. id und itemData. Artikel. Titel hier, 37 00:03:17,360 --> 00:03:23,690 damit diese Daten in dieser Funktion landen. Ich mache das, weil ich jetzt den gleichen 38 00:03:23,690 --> 00:03:31,760 Item-Handler hier auf dieser Schaltfläche mit Ansichtsdetails verwenden kann. Ich kann diese anonyme Funktion im Wesentlichen einfach kopieren und hier zu 39 00:03:31,760 --> 00:03:34,560 diesem onPress-Handler dieser Schaltfläche hinzufügen. Jetzt verwenden 40 00:03:34,610 --> 00:03:37,970 wir das wieder und fügen es hinzu Warenkorb, nun 41 00:03:38,060 --> 00:03:39,740 da versenden wir dies, dies 42 00:03:39,890 --> 00:03:45,320 wird jetzt hier aus der Produktartikelkomponente entfernt, da wir dort nicht mehr diese Requisite 43 00:03:45,320 --> 00:03:52,340 haben, stattdessen ist es jetzt hier, diese Requisite, die diese anonyme Funktion übernimmt, die dann am Ende diese Aktion 44 00:03:52,340 --> 00:03:53,510 versenden sollte. 45 00:03:53,900 --> 00:04:00,170 Die wichtigste Änderung besteht nun darin, dass ich die Schaltflächen aus der Komponente, der Produktartikelkomponente in die 46 00:04:00,170 --> 00:04:05,930 Produktübersichtsbildschirmkomponente verschiebe. Dadurch können wir immer noch das Gleiche tun wie zuvor. Wenn ich das 47 00:04:05,930 --> 00:04:11,330 speichere, sollte dies weiterhin funktionieren Vor. Wir können auf einen Artikel tippen, wir 48 00:04:11,330 --> 00:04:15,420 können auf Details tippen, wir können auf Warenkorb tippen und das alles 49 00:04:15,740 --> 00:04:18,890 funktioniert, aber jetzt können wir dies auch im Benutzerproduktbildschirm anpassen. 50 00:04:19,250 --> 00:04:28,410 Dort kopiere ich auch diese Schaltflächen und gehe zum Benutzerproduktbildschirm. Dort importiere ich die Schaltfläche aus React Native, importiere unsere Farbkonstante, 51 00:04:28,470 --> 00:04:36,870 da wir diese für die Schaltflächen aus Konstantenfarben und dann hier im Produktelement benötigen Anstatt dies einzurichten, müssen wir 52 00:04:37,320 --> 00:04:47,480 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 53 00:04:47,480 --> 00:04:49,450 hinzu und fügen 54 00:04:49,550 --> 00:04:53,240 hier erneut unsere Schaltflächen hinzu, anstatt jetzt Details 55 00:04:53,240 --> 00:04:55,380 anzuzeigen Ich sage Bearbeiten 56 00:04:55,490 --> 00:05:01,940 und Löschen und im Moment kann ich einfach alle andere Logik entfernen, da wir 57 00:05:02,060 --> 00:05:06,380 im Moment keine Logik zum Bearbeiten und Löschen haben, aber 58 00:05:06,380 --> 00:05:08,630 das können wir später hinzufügen. 59 00:05:08,870 --> 00:05:13,630 Und hier für on select ist es im Moment auch nur eine leere Funktion. 60 00:05:13,780 --> 00:05:19,690 Dies hat den Vorteil, dass wir jetzt unsere Artikel wie zuvor hier haben, aber im Admin-Bereich haben wir jetzt das 61 00:05:19,690 --> 00:05:21,430 Bearbeiten und Löschen und dies ermöglicht 62 00:05:21,550 --> 00:05:26,290 es uns, verschiedene Dinge zu tun, indem wir die Produktartikelkomponente immer noch wiederverwenden, was natürlich sehr 63 00:05:26,290 --> 00:05:27,330 schön ist.