1 00:00:02,330 --> 00:00:03,970 Damit wir unsere Elemente hier 2 00:00:03,970 --> 00:00:08,150 hinzufügen können, können wir sie nicht löschen. Dies ist der nächste Schritt, den ich 3 00:00:08,190 --> 00:00:10,880 ausführen möchte, der nächste, den ich hier implementieren möchte. 4 00:00:10,960 --> 00:00:16,420 Wir haben unsere FlatList mit all diesen Zielelementen erhalten, und es wäre schön, wenn wir auf ein solches Zielelement tippen 5 00:00:16,450 --> 00:00:18,010 könnten, also auf ein solches 6 00:00:18,130 --> 00:00:21,960 Listenelement, und wenn wir darauf tippen, entfernen wir es einfach aus der Liste. 7 00:00:21,970 --> 00:00:27,550 Das Gute ist nun, dass wir jeden Artikel eindeutig identifizieren können, da jeder Artikel hier eine ID hat. Wir 8 00:00:27,550 --> 00:00:30,590 können diese ID also verwenden und den Artikel entfernen. Das 9 00:00:30,760 --> 00:00:35,240 Fehlende ist, dass wir darauf tippen können. Jetzt können wir 10 00:00:35,260 --> 00:00:38,730 auf unserer eigenen Komponente nicht einfach onPress 11 00:00:38,740 --> 00:00:44,040 oder ähnliches hinzufügen. Dies funktioniert nicht. Wenn das Konsolenprotokoll hier funktioniert, 12 00:00:44,050 --> 00:00:46,300 wird dieses Protokoll nicht angezeigt, 13 00:00:46,300 --> 00:00:49,570 sobald ich auf das Element drücke. 14 00:00:49,570 --> 00:00:55,990 Lassen Sie mich Ihnen dies zeigen. Wenn Sie dies hier neu laden lassen und dann wieder React Native lernen und ich 15 00:00:55,990 --> 00:01:02,050 dies hinzufüge und hier mehrmals darauf tippe, tippe ich darauf, Sie sehen die Ausgabe hier nicht und es macht Sinn, 16 00:01:02,050 --> 00:01:07,990 dies ist eine benutzerdefinierte Komponente und onPress wäre jetzt einfach eine Requisite, die wir an diese Komponente übergeben. Diese 17 00:01:07,990 --> 00:01:13,420 Requisite wäre mit dieser Funktion verbunden, aber nichts löst diese Requisite aus dem Inneren der Komponente aus. 18 00:01:14,020 --> 00:01:18,850 Wir müssen also in diese Komponente gehen und sicherstellen, dass diese Ansicht druckbar ist. 19 00:01:19,030 --> 00:01:24,200 Tatsächlich enthält eine Ansicht verschiedene Requisiten, die uns beim Abhören von Ereignissen helfen. Wenn 20 00:01:24,280 --> 00:01:30,190 Sie hier eingeben, sollte Ihre IDE, wenn Sie Visual Studio Code verwenden, eine automatische Vervollständigung bewirken und 21 00:01:30,570 --> 00:01:33,830 Sie sehen, dass es eine ganze Reihe von Ereignissen 22 00:01:33,940 --> 00:01:40,150 gibt, die Sie können Zum Beispiel hilft uns onTouchEnd beim Zuhören, wenn der Benutzer dies im Grunde berührt 23 00:01:40,180 --> 00:01:41,450 und fertig ist. 24 00:01:41,620 --> 00:01:48,340 Das Problem dabei ist, dass onTouchEnd und einige andere Hörer, die wir hier haben, auf einem zu niedrigen 25 00:01:48,430 --> 00:01:49,300 Niveau sind. 26 00:01:49,480 --> 00:01:56,020 Wir können hier sehr detaillierte Listener für verschiedene Ereignisse einrichten, aber onTouchEnd sagt uns beispielsweise nicht, wie lange der Benutzer dies 27 00:01:56,020 --> 00:01:57,960 gedrückt hat, und wenn Sie 28 00:01:58,090 --> 00:02:03,640 jemals herausfinden müssen, ob es sich um ein langes oder ein kurzes Drücken handelt, müssen Sie dies manuell 29 00:02:03,640 --> 00:02:10,090 tun Stellen Sie einen Timer ein, wenn der Benutzer dies mit onTouchStart berührt, warten Sie auf onTouchEnd und entscheiden Sie dann 30 00:02:10,090 --> 00:02:12,480 manuell, ob dies lang genug war oder nicht. 31 00:02:12,610 --> 00:02:16,870 Es ist normalerweise nicht das, was Sie tun möchten, es ist natürlich großartig, dass 32 00:02:16,870 --> 00:02:24,100 Sie die volle Flexibilität dafür haben, aber wenn Sie diese Standard-Touch-Ereignisse wie langes Drücken möchten, dann ist dies nicht ideal, weil Sie all die 33 00:02:24,100 --> 00:02:26,770 schweren Aufgaben ausführen müssten Wenn Sie alleine heben, 34 00:02:26,770 --> 00:02:31,390 müssten Sie viel Code schreiben, um herauszufinden, um welche Art von Berührung es sich handelt. 35 00:02:31,390 --> 00:02:34,200 Das Gute ist, React Native hat Sie abgedeckt. 36 00:02:34,240 --> 00:02:40,660 Es gibt eine integrierte berührbare Komponente, die Sie importieren können, und berührbar ist eine Komponente, die Sie 37 00:02:40,660 --> 00:02:42,670 um jede andere Komponente 38 00:02:42,760 --> 00:02:49,660 wickeln können, also um jede Ansicht oder jeden Text oder was auch immer Sie haben und die nicht sichtbar 39 00:02:49,660 --> 00:02:56,200 ist, sie rendert nichts, was Sie haben kann auf dem Bildschirm sehen, aber es wird dies umbrechen und 40 00:02:56,200 --> 00:03:03,190 das Berührungsereignis auf dem Kind registrieren, um das Sie berührbar und berührbar wickeln, dann erhalten Sie das fertige Berührungsereignis, 41 00:03:03,190 --> 00:03:09,070 also detailliertere Berührungsereignisse, die für Sie vorkonfiguriert wurden. Um genau zu sein, kann so berührbar nicht als 42 00:03:09,070 --> 00:03:13,900 Komponente verwendet werden, sondern fungiert eher als übergeordnete Klasse für React Native, da es mehrere spezifische 43 00:03:13,900 --> 00:03:15,040 Versionen von berührbar 44 00:03:15,160 --> 00:03:21,730 gibt, die Sie dann tatsächlich verwenden sollten, z. B. berührbare Deckkraft. Lassen Sie uns berührbare Deckkraft anstelle von berührbarer verwenden, 45 00:03:21,730 --> 00:03:23,980 da dies nun wirklich eine 46 00:03:23,980 --> 00:03:30,760 Komponente ist, die Sie verwenden können, und jetzt werden Sie sehen, dass Sie beim Tippen einige Berührungsereignisse auf hoher 47 00:03:30,760 --> 00:03:34,140 Ebene erhalten, die Sie anhören können, wie z. B. onPress 48 00:03:34,210 --> 00:03:37,120 oder onLongPress, und das ist natürlich viel hilfreicher. 49 00:03:37,120 --> 00:03:42,910 Jetzt kann ich hier onPress hören, was bedeutet, dass es ein normales Presseereignis ist, wie wir 50 00:03:42,910 --> 00:03:49,290 es auf der Schaltfläche hören können. Wenn dies ausgelöst wird, können wir natürlich jeden gewünschten Code ausführen und 51 00:03:49,360 --> 00:03:54,520 dies beispielsweise weiterleiten sagen wir Requisiten. onDelete. 52 00:03:54,520 --> 00:04:00,400 Wir rufen also eine Funktion auf, die in dieser Komponente auf der onDelete-Requisite übergeben wurde. Wir 53 00:04:00,410 --> 00:04:05,980 setzen diese Requisite derzeit nicht, aber wir rufen jetzt etwas auf dieser Requisite auf und 54 00:04:05,980 --> 00:04:12,610 können jetzt zu dem Ort gehen, zur App. js, wo wir das Zielelement verwenden und die onDelete-Requisite 55 00:04:12,610 --> 00:04:18,820 anstelle von onPress hinzufügen, und onDelete sollte jetzt auf eine Funktion zeigen, da wir hier in unserem Zielelement 56 00:04:18,820 --> 00:04:25,030 eine Funktion erwarten, weil onPress eine Funktion erwartet und wir einfach weiterleiten, was onDelete auf onPress zeigt. 57 00:04:25,840 --> 00:04:32,750 OnDelete sollte also auf eine Funktion zeigen, und es ist nur eine Funktion, die druckt. Trotzdem ist das zumindest gut zum Testen. 58 00:04:32,980 --> 00:04:34,480 Mal sehen, 59 00:04:34,480 --> 00:04:43,310 ob ich React Native lerne und dies hinzufüge und hier mehrmals darauf tippe. Sie sehen, dass ich dieses Feedback erhalte, 60 00:04:43,310 --> 00:04:49,940 diesen leichten Opazitätseffekt hier beim Drücken und wenn ich dies tue, Sie Sehen Sie das 61 00:04:49,940 --> 00:04:56,070 hier im Protokoll, damit das funktioniert hat. Und Sie sehen auch den Effekt der berührbaren Deckkraft. 62 00:04:56,110 --> 00:05:02,560 Dies gibt uns tatsächlich ein visuelles Feedback über unsere Berührung, indem Sie die Deckkraft des von uns berührten 63 00:05:02,560 --> 00:05:03,600 Elements ändern. 64 00:05:03,610 --> 00:05:10,930 Sie können diese Deckkraft auch steuern, indem Sie hier die aktive Deckkraftstütze auf berührbare Deckkraft setzen und diese auf eine Zahl setzen, 65 00:05:10,930 --> 00:05:13,620 z. B. auf. 8 und jetzt 66 00:05:13,750 --> 00:05:18,120 ist dies viel weniger transparent, zum Beispiel, wenn Sie es drücken. 67 00:05:18,130 --> 00:05:23,980 Wenn ich hier React Native gelernt habe und dies drücke, ist der Opazitätseffekt viel 68 00:05:23,980 --> 00:05:29,860 weniger stark, wie Sie sehen können. Sie können dies also nach Ihren Wünschen konfigurieren und damit 69 00:05:29,860 --> 00:05:35,980 nicht nur einen schönen Effekt hinzufügen, sondern natürlich auch den Presseffekt anhören. Jetzt ist die berührbare Deckkraft nicht die einzige Komponente, 70 00:05:35,980 --> 00:05:43,720 die Sie verwenden können. Neben der berührbaren Deckkraft haben Sie auch eine berührbare Hervorhebung. Verwenden Sie jetzt stattdessen die berührbare Hervorhebung, um zu sehen, 71 00:05:43,750 --> 00:05:48,850 wie sich dies verhält, und die allgemeine Idee ist dieselbe wie bei der berührbaren Hervorhebung. 72 00:05:48,880 --> 00:05:55,570 Sie können auch zuhören Ereignisse zu drücken, also zu diesen Ereignissen auf hoher Ebene, diesen vorkonfigurierten Ereignissen, aber das visuelle 73 00:05:55,570 --> 00:05:57,370 Feedback wird ein anderes sein. 74 00:05:57,460 --> 00:06:01,980 Hier ändern wir nicht die Deckkraft des umschlossenen Elements, sondern die Hintergrundfarbe. 75 00:06:02,020 --> 00:06:06,520 Wenn ich nun React Native lerne und darauf tippe, sehen Sie, 76 00:06:06,520 --> 00:06:11,830 dass sich die Hintergrundfarbe in Schwarz ändert, und natürlich ist dies hier in diesem 77 00:06:11,830 --> 00:06:17,260 Fall nicht der gewünschte visuelle Effekt. Jetzt können Sie dort auch die aktive Deckkraft konfigurieren, 78 00:06:17,260 --> 00:06:22,660 wenn Sie möchten. Sie können konfigurieren, welche Verzögerung für ein langes Drücken angenommen wird. Sie hätten dies 79 00:06:22,660 --> 00:06:29,080 auch bei berührbarer Deckkraft tun können, sodass Sie diesen Effekt konfigurieren und einfach damit herumspielen können ein Gefühl dafür bekommen, wie 80 00:06:29,080 --> 00:06:30,360 man es benutzt. 81 00:06:30,700 --> 00:06:40,240 Neben berührbarer Deckkraft und berührbarer Hervorhebung haben Sie auch berührbares natives Feedback, das nur unter Android funktioniert. Im Moment wissen Sie nicht, wie Sie herausfinden können, ob dies unter 82 00:06:40,240 --> 00:06:45,150 Android ausgeführt wird oder nicht. Ich zeige Ihnen, wie Sie bestimmen, welche Plattform Sie verwenden 83 00:06:45,190 --> 00:06:48,550 Sie laufen später weiter, jetzt verwenden wir das und Sie 84 00:06:48,550 --> 00:06:53,980 können dies nicht auf dem iPhone-Simulator testen, aber hier auf Android, wenn ich dies jetzt hinzufüge, werden 85 00:06:53,980 --> 00:06:58,140 Sie sehen, dass Sie diesen Welleneffekt jetzt erhalten, wenn Sie testen Dies 86 00:06:58,140 --> 00:07:04,930 hier und natürlich können Sie diesen Effekt auch hier mit Requisiten konfigurieren, die Sie einstellen können. Wie immer sind die offiziellen 87 00:07:05,090 --> 00:07:10,400 Dokumente auch ein guter Ort, wenn Sie mehr darüber erfahren möchten, wie Sie dies konfigurieren können, 88 00:07:10,400 --> 00:07:11,080 damit 89 00:07:11,090 --> 00:07:14,360 dieser Welleneffekt möglich ist Sei auch auf Android nett. 90 00:07:14,420 --> 00:07:19,940 Und last but not least gibt es auch ohne Feedback berührbar und dies tut, was der Name 91 00:07:20,000 --> 00:07:25,700 andeutet. Es ermöglicht Ihnen, diese Ereignisse zu registrieren, aber es gibt kein visuelles Feedback, da Sie manchmal nur 92 00:07:25,700 --> 00:07:31,970 etwas haben möchten, auf das Sie tippen können, das Sie aber tatsächlich nicht anziehen Ich möchte dem Benutzer kein Feedback geben. 93 00:07:32,240 --> 00:07:34,740 Hier kann ich also so oft tippen, 94 00:07:34,820 --> 00:07:37,760 wie ich möchte, der Tipp ist registriert und daher 95 00:07:37,760 --> 00:07:44,210 sehe ich die Ausgabe hier, aber wir erhalten kein visuelles Feedback. Daher sind diese berührbaren Komponenten in React Native 96 00:07:44,240 --> 00:07:51,140 sehr wichtig, da Sie damit die normalen High-Level-Touch-Listener wie onPress, onLongPress usw. an jede Komponente in React Native 97 00:07:51,230 --> 00:07:57,080 anschließen können und damit Ihre eigenen berührbaren Komponenten, Ihre eigenen Schaltflächen, erstellen können , deine 98 00:07:57,080 --> 00:07:59,980 eigenen Links, was auch immer du brauchst. 99 00:07:59,980 --> 00:08:08,800 Jetzt gehe ich zurück zur berührbaren Deckkraft, weil mir dieser Deckkrafteffekt gefällt, aber Sie können das Video hier wirklich anhalten und mit diesen 100 00:08:08,800 --> 00:08:14,410 verschiedenen berührbaren Effekten herumspielen und mit den verschiedenen Konfigurationen herumspielen, die Sie dort anwenden 101 00:08:14,410 --> 00:08:16,490 können. Ich werde während des 102 00:08:16,570 --> 00:08:19,990 gesamten Kurses häufig Touchable verwenden, daher werden wir sie 103 00:08:19,990 --> 00:08:26,020 dort häufig sehen, aber dies ist auch ein großartiger Ort, um mit diesen Komponenten zu 104 00:08:26,140 --> 00:08:27,940 beginnen. Wie gesagt, ich 105 00:08:27,940 --> 00:08:33,040 werde hier mit berührbarer Deckkraft arbeiten, und jetzt besteht der nächste Schritt darin, sicherzustellen, dass wir nicht nur 106 00:08:33,040 --> 00:08:36,700 etwas in der Konsole protokollieren, sondern das Element, das gedrückt wurde, tatsächlich löschen.