Wann sollte TouchableNativeFeedback, TouchableHighlight oder TouchableOpacity verwendet werden?

90

In Reaktion Ureinwohner, gibt es mindestens drei Möglichkeiten , einen Knopf zu machen: TouchableNativeFeedback, TouchableHighlightund TouchableOpacity. In TouchableWithoutFeedbackder Dokumentation heißt es außerdem eindeutig, dass Sie diese nicht verwenden sollten, da "alle Elemente, die auf die Presse reagieren, bei Berührung ein visuelles Feedback erhalten sollten".

Gibt es noch andere signifikante Unterschiede zwischen den drei? Ist einer von ihnen die goto-Komponente? In welchem ​​Fall sollten Sie TouchableHighlightüber verwenden TouchableOpacity? Gibt es irgendwelche Auswirkungen auf die Leistung?

Ich schreibe gerade eine Anwendung und stelle fest, dass alle drei eine erhebliche Verzögerung zwischen dem Tippen und der Aktion haben (in diesem Fall eine Navigationsänderung). Gibt es eine Möglichkeit, es schneller zu machen?

Damusnet
quelle
4
Was die Schnelligkeit betrifft ... verlangsamt die Ausgabe von etwas an console.log die Szenenübergänge erheblich. Ich fange gerade erst mit der Reaktion auf native an und war von der Geschwindigkeit bei der Entwicklung meiner ersten Komponenten etwas unbeeindruckt. Ich habe alle console.log-Befehle (einschließlich des Deaktivierens des Redux-Loggers) entfernt und für das Release-Ziel erstellt. Die Geschwindigkeit hat mich umgehauen. Dies kommt von der Entwicklung von Cordova-Apps.
Travis White

Antworten:

109

Quelle: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 , von Nick Wientge

TouchableHighlight

• Was es tut: Verdunkelt oder hellt den Hintergrund des Elements auf, wenn es gedrückt wird.

• Verwendungszweck: Unter iOS für berührbare Elemente oder Schaltflächen mit fester Form oder Hintergrund und bei ListView-Elementen.

TouchableOpacity

• Was es tut: Hellt die Deckkraft des gesamten Elements auf, wenn es gedrückt wird.

• Verwendungszweck: Unter iOS für berührbare Elemente, bei denen es sich um eigenständigen Text oder Symbole ohne Hintergrundfarbe handelt.

TouchableNativeFeedback

• Was es tut: Fügt dem Hintergrund beim Drücken einen Welleneffekt hinzu.

• Wann es verwendet werden soll: Unter Android für fast alle berührbaren Elemente.

Edan Chetrit
quelle
Danke dir! Ich hatte diesen Artikel seitdem gelesen, konnte ihn aber nicht mehr finden, um meine eigene Frage zu beantworten. Es ist genau das, wonach ich gesucht habe.
Damusnet
1
Wenn Sie TouchableNativeFeedback verwenden, hat es diesen quadratischen Hintergrund (ich meine nicht Welligkeit). Wie passen wir das an (z. B. vergrößern, runden oder vielleicht entfernen und nur Welligkeit alleine haben)?
Yasir
8

So entscheide ich normalerweise, was ich verwenden soll:

  • Wenn ich nur für Android baue und die Komponente groß genug ist, dass sich das native Feedback sichtbar von den anderen unterscheidet, verwende ich es TouchableNativeFeedback
  • Wenn ich die Deckkraft der Komponente steuern möchte oder wenn die Schaltfläche beim Berühren Farbe haben soll und ich den fokussierten Zustand eines Elements in Touchable nicht steuern möchte, verwende ich TouchableHighlight. ( TouchableOpacityhat einige seltsame Teile, wenn Sie die Deckkraft selbst steuern).
  • In allen anderen Fällen verwende ich, TouchableOpacityweil es "nackter" ist alsTouchableHighlight
mienaikoe
quelle
1
Diese Antwort ist ein hilfreicher Anfang… aber ich hatte gehofft, fundiertere technische und / oder designbezogene Gründe zu finden, warum ich eine gegen die andere verwenden sollte.
Beau Smith
1

Ich denke, der wesentliche Hauptunterschied, wie in den Dokumenten angegeben:

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.Verknüpfung

TouchableHighlight

TouchableHighlight Ein Wrapper, mit dem Ansichten richtig auf Berührungen reagieren. Beim Herunterdrücken wird die Deckkraft der umschlossenen Ansicht verringert, wodurch die Unterlagefarbe durchscheinen, die Ansicht abdunkeln oder tönen kann.

Die Unterlage stammt aus dem Umschließen des Kindes in eine neue Ansicht, was sich auf das Layout auswirken kann und manchmal unerwünschte visuelle Artefakte verursacht, wenn es nicht richtig verwendet wird, z. B. wenn die Hintergrundfarbe der umschlossenen Ansicht nicht explizit auf eine undurchsichtige Farbe festgelegt ist.

TouchableOpacity

TouchableOpacity # Ein Wrapper, mit dem Ansichten richtig auf Berührungen reagieren können. Beim Herunterdrücken wird die Deckkraft der umschlossenen Ansicht verringert und gedimmt.

Mohamed Saleh
quelle
-3

Wenn du möchtest

  • Markiertaste beim Drücken - Verwenden TouchableHighlight
  • Ändern der Deckkraft der Taste beim Drücken - Verwenden TouchableOpacity
Stereodenis
quelle
3
Ich denke, der Autor ist sich dessen bewusst und bittet um eine komplexere Antwort.
Radek Czemerys
1
Darüber hinaus können Sie sogar <TouchableHighlight underlayColor="transparent" />... und Facebook mischt alle in ihrer F8-App github.com/fbsamples/f8app/blob/master/js/common/F8Touchable.js
damusnet