Wann sollte TouchableNativeFeedback, TouchableHighlight oder TouchableOpacity verwendet werden?

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".

• TouchableNativeFeedback ist nur für Android verfügbar und "ersetzt die Ansicht durch eine andere Instanz von RCTView"
• TouchableHighlight "fügt der Ansichtshierarchie eine Ansicht hinzu"
• TouchableOpacity funktioniert "ohne die Ansichtshierarchie zu ändern"

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?

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.

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

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.

Wenn du möchtest

• Markiertaste beim Drücken - Verwenden TouchableHighlight
• Ändern der Deckkraft der Taste beim Drücken - Verwenden TouchableOpacity