Damit wir unsere Elemente hier
hinzufügen können, können wir sie nicht löschen. Dies ist der nächste Schritt, den ich
ausführen möchte, der nächste, den ich hier implementieren möchte.
Wir haben unsere FlatList mit all diesen Zielelementen erhalten, und es wäre schön, wenn wir auf ein solches Zielelement tippen
könnten, also auf ein solches
Listenelement, und wenn wir darauf tippen, entfernen wir es einfach aus der Liste.
Das Gute ist nun, dass wir jeden Artikel eindeutig identifizieren können, da jeder Artikel hier eine ID hat. Wir
können diese ID also verwenden und den Artikel entfernen. Das
Fehlende ist, dass wir darauf tippen können. Jetzt können wir
auf unserer eigenen Komponente nicht einfach onPress
oder ähnliches hinzufügen. Dies funktioniert nicht. Wenn das Konsolenprotokoll hier funktioniert,
wird dieses Protokoll nicht angezeigt,
sobald ich auf das Element drücke.
Lassen Sie mich Ihnen dies zeigen. Wenn Sie dies hier neu laden lassen und dann wieder React Native lernen und ich
dies hinzufüge und hier mehrmals darauf tippe, tippe ich darauf, Sie sehen die Ausgabe hier nicht und es macht Sinn,
dies ist eine benutzerdefinierte Komponente und onPress wäre jetzt einfach eine Requisite, die wir an diese Komponente übergeben. Diese
Requisite wäre mit dieser Funktion verbunden, aber nichts löst diese Requisite aus dem Inneren der Komponente aus.
Wir müssen also in diese Komponente gehen und sicherstellen, dass diese Ansicht druckbar ist.
Tatsächlich enthält eine Ansicht verschiedene Requisiten, die uns beim Abhören von Ereignissen helfen. Wenn
Sie hier eingeben, sollte Ihre IDE, wenn Sie Visual Studio Code verwenden, eine automatische Vervollständigung bewirken und
Sie sehen, dass es eine ganze Reihe von Ereignissen
gibt, die Sie können Zum Beispiel hilft uns onTouchEnd beim Zuhören, wenn der Benutzer dies im Grunde berührt
und fertig ist.
Das Problem dabei ist, dass onTouchEnd und einige andere Hörer, die wir hier haben, auf einem zu niedrigen
Niveau sind.
Wir können hier sehr detaillierte Listener für verschiedene Ereignisse einrichten, aber onTouchEnd sagt uns beispielsweise nicht, wie lange der Benutzer dies
gedrückt hat, und wenn Sie
jemals herausfinden müssen, ob es sich um ein langes oder ein kurzes Drücken handelt, müssen Sie dies manuell
tun Stellen Sie einen Timer ein, wenn der Benutzer dies mit onTouchStart berührt, warten Sie auf onTouchEnd und entscheiden Sie dann
manuell, ob dies lang genug war oder nicht.
Es ist normalerweise nicht das, was Sie tun möchten, es ist natürlich großartig, dass
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
schweren Aufgaben ausführen müssten Wenn Sie alleine heben,
müssten Sie viel Code schreiben, um herauszufinden, um welche Art von Berührung es sich handelt.
Das Gute ist, React Native hat Sie abgedeckt.
Es gibt eine integrierte berührbare Komponente, die Sie importieren können, und berührbar ist eine Komponente, die Sie
um jede andere Komponente
wickeln können, also um jede Ansicht oder jeden Text oder was auch immer Sie haben und die nicht sichtbar
ist, sie rendert nichts, was Sie haben kann auf dem Bildschirm sehen, aber es wird dies umbrechen und
das Berührungsereignis auf dem Kind registrieren, um das Sie berührbar und berührbar wickeln, dann erhalten Sie das fertige Berührungsereignis,
also detailliertere Berührungsereignisse, die für Sie vorkonfiguriert wurden. Um genau zu sein, kann so berührbar nicht als
Komponente verwendet werden, sondern fungiert eher als übergeordnete Klasse für React Native, da es mehrere spezifische
Versionen von berührbar
gibt, die Sie dann tatsächlich verwenden sollten, z. B. berührbare Deckkraft. Lassen Sie uns berührbare Deckkraft anstelle von berührbarer verwenden,
da dies nun wirklich eine
Komponente ist, die Sie verwenden können, und jetzt werden Sie sehen, dass Sie beim Tippen einige Berührungsereignisse auf hoher
Ebene erhalten, die Sie anhören können, wie z. B. onPress
oder onLongPress, und das ist natürlich viel hilfreicher.
Jetzt kann ich hier onPress hören, was bedeutet, dass es ein normales Presseereignis ist, wie wir
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
dies beispielsweise weiterleiten sagen wir Requisiten. onDelete.
Wir rufen also eine Funktion auf, die in dieser Komponente auf der onDelete-Requisite übergeben wurde. Wir
setzen diese Requisite derzeit nicht, aber wir rufen jetzt etwas auf dieser Requisite auf und
können jetzt zu dem Ort gehen, zur App. js, wo wir das Zielelement verwenden und die onDelete-Requisite
anstelle von onPress hinzufügen, und onDelete sollte jetzt auf eine Funktion zeigen, da wir hier in unserem Zielelement
eine Funktion erwarten, weil onPress eine Funktion erwartet und wir einfach weiterleiten, was onDelete auf onPress zeigt.
OnDelete sollte also auf eine Funktion zeigen, und es ist nur eine Funktion, die druckt. Trotzdem ist das zumindest gut zum Testen.
Mal sehen,
ob ich React Native lerne und dies hinzufüge und hier mehrmals darauf tippe. Sie sehen, dass ich dieses Feedback erhalte,
diesen leichten Opazitätseffekt hier beim Drücken und wenn ich dies tue, Sie Sehen Sie das
hier im Protokoll, damit das funktioniert hat. Und Sie sehen auch den Effekt der berührbaren Deckkraft.
Dies gibt uns tatsächlich ein visuelles Feedback über unsere Berührung, indem Sie die Deckkraft des von uns berührten
Elements ändern.
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,
z. B. auf. 8 und jetzt
ist dies viel weniger transparent, zum Beispiel, wenn Sie es drücken.
Wenn ich hier React Native gelernt habe und dies drücke, ist der Opazitätseffekt viel
weniger stark, wie Sie sehen können. Sie können dies also nach Ihren Wünschen konfigurieren und damit
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,
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,
wie sich dies verhält, und die allgemeine Idee ist dieselbe wie bei der berührbaren Hervorhebung.
Sie können auch zuhören Ereignisse zu drücken, also zu diesen Ereignissen auf hoher Ebene, diesen vorkonfigurierten Ereignissen, aber das visuelle
Feedback wird ein anderes sein.
Hier ändern wir nicht die Deckkraft des umschlossenen Elements, sondern die Hintergrundfarbe.
Wenn ich nun React Native lerne und darauf tippe, sehen Sie,
dass sich die Hintergrundfarbe in Schwarz ändert, und natürlich ist dies hier in diesem
Fall nicht der gewünschte visuelle Effekt. Jetzt können Sie dort auch die aktive Deckkraft konfigurieren,
wenn Sie möchten. Sie können konfigurieren, welche Verzögerung für ein langes Drücken angenommen wird. Sie hätten dies
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
man es benutzt.
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
Android ausgeführt wird oder nicht. Ich zeige Ihnen, wie Sie bestimmen, welche Plattform Sie verwenden
Sie laufen später weiter, jetzt verwenden wir das und Sie
können dies nicht auf dem iPhone-Simulator testen, aber hier auf Android, wenn ich dies jetzt hinzufüge, werden
Sie sehen, dass Sie diesen Welleneffekt jetzt erhalten, wenn Sie testen Dies
hier und natürlich können Sie diesen Effekt auch hier mit Requisiten konfigurieren, die Sie einstellen können. Wie immer sind die offiziellen
Dokumente auch ein guter Ort, wenn Sie mehr darüber erfahren möchten, wie Sie dies konfigurieren können,
damit
dieser Welleneffekt möglich ist Sei auch auf Android nett.
Und last but not least gibt es auch ohne Feedback berührbar und dies tut, was der Name
andeutet. Es ermöglicht Ihnen, diese Ereignisse zu registrieren, aber es gibt kein visuelles Feedback, da Sie manchmal nur
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.
Hier kann ich also so oft tippen,
wie ich möchte, der Tipp ist registriert und daher
sehe ich die Ausgabe hier, aber wir erhalten kein visuelles Feedback. Daher sind diese berührbaren Komponenten in React Native
sehr wichtig, da Sie damit die normalen High-Level-Touch-Listener wie onPress, onLongPress usw. an jede Komponente in React Native
anschließen können und damit Ihre eigenen berührbaren Komponenten, Ihre eigenen Schaltflächen, erstellen können , deine
eigenen Links, was auch immer du brauchst.
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
verschiedenen berührbaren Effekten herumspielen und mit den verschiedenen Konfigurationen herumspielen, die Sie dort anwenden
können. Ich werde während des
gesamten Kurses häufig Touchable verwenden, daher werden wir sie
dort häufig sehen, aber dies ist auch ein großartiger Ort, um mit diesen Komponenten zu
beginnen. Wie gesagt, ich
werde hier mit berührbarer Deckkraft arbeiten, und jetzt besteht der nächste Schritt darin, sicherzustellen, dass wir nicht nur
etwas in der Konsole protokollieren, sondern das Element, das gedrückt wurde, tatsächlich löschen.