Quand utiliser TouchableNativeFeedback, TouchableHighlight ou TouchableOpacity?

Question

Dans Réagissent Natif, il y a au moins trois façons de faire un bouton: TouchableNativeFeedback, TouchableHighlight et TouchableOpacity. Il est également TouchableWithoutFeedback, la documentation indique clairement que vous ne devez pas utiliser, parce que "tous les éléments qui répondent à la presse doit avoir un retour visuel de touché".

• TouchableNativeFeedback est Android et "remplace la Vue avec une autre instance de RCTView"
• TouchableHighlight "ajoute un affichage à la vue de la hiérarchie"
• TouchableOpacity œuvres "sans changer le point de vue de la hiérarchie"

Existe-il d'autres différences significatives entre les trois? L'un d'eux est le goto composant? Dans quels cas devez-vous utiliser TouchableHighlight sur TouchableOpacity? Existe-il des implications sur les performances?

Je suis en train d'écrire une application dès maintenant, et de trouver que tous les trois ont un retard important entre le robinet et l'action (dans ce cas, une navigation de changement). Est-il un moyen de le rendre plus vif?

Answer 1

source: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472par Nick Wientge

TouchableHighlight

• Ce qu'il fait: s'Assombrit ou s'éclaircit en arrière-plan de l'élément lorsqu'il est pressé.

• Quand l'utiliser: Sur iOS pour toucher les éléments ou des boutons qui ont un solide de forme ou de fond, et sur des éléments ListView.

TouchableOpacity

• Ce qu'il fait: Allège l'opacité de l'ensemble de l'élément lorsqu'il est pressé.

• Quand l'utiliser: Sur iOS pour toucher les éléments qui sont indépendantes du texte ou des icônes avec pas de couleur d'arrière-plan.

TouchableNativeFeedback

• Ce qu'il fait: Ajoute un effet d'entraînement à l'arrière-plan lorsqu'il est pressé.

• Quand l'utiliser: Sur Android pour presque tous palpable éléments.

Answer 2

Eh bien, c'est de Cette façon que j'ai généralement de décider ce qu'il faut utiliser:

• Si je suis en train de construire pour Android seulement, et la pièce est assez grande pour que le natif de la rétroaction sera visiblement différent que d'utiliser les autres puis-je utiliser TouchableNativeFeedback
• Si je veux le contrôle de l'opacité sur le composant ou je veux que le bouton pour avoir de la couleur quand on les touche, et je ne veux pas de contrôle de l'état condensé de certains éléments à l'intérieur de la Toucher, puis-je utiliser TouchableHighlight. (TouchableOpacity a obtenu un peu bizarre pièces de contrôle de l'opacité de vous-même).
• Dans tous les autres cas, j'utilise TouchableOpacity parce que c'est plus "nu" que TouchableHighlight

Answer 3

Je pense que la principale différence essentielle comme indiqué dans les Docs:

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

TouchableHighlight

TouchableHighlight Un wrapper pour la prise de vue de répondre correctement à touche. Appuyez vers le bas, l'opacité de la enveloppé vue est diminué, ce qui permet à la sous-couche de couleur à montrer à travers, ou un assombrissement de teinture le point de vue.

La sous-couche vient de l'habillage de l'enfant dans un nouveau point de Vue, qui peut affecter la mise en page, et parfois causer des artefacts visuels si ce n' utilisé correctement, par exemple si le backgroundColor de la enveloppé vue n'est pas explicitement définie à une couleur opaque.

TouchableOpacity

TouchableOpacity # wrapper pour la prise de vue de répondre correctement à touche. Appuyez vers le bas, l'opacité de la enveloppé vue est diminué, la gradation.

Answer 4

Si tu veux

• bouton en surbrillance sur presse - utilisez TouchableHighlight
• changer l'opacité du bouton à la presse - utilisez TouchableOpacity