Question Quand utiliser TouchableNativeFeedback, TouchableHighlight ou TouchableOpacity?


Dans React Native, il existe au moins trois façons de créer un bouton: TouchableNativeFeedback, TouchableHighlight et TouchableOpacity. Il y a aussi TouchableWithoutFeedback, que la documentation indique clairement que vous ne devez pas utiliser car "tous les éléments qui répondent à la presse doivent avoir un retour visuel lorsqu'ils sont touchés".

Y a-t-il d'autres différences significatives entre les trois? L'un d'entre eux est-il le composant goto? Dans quel cas devriez-vous utiliser TouchableHighlight plus de TouchableOpacity? Y at-il des implications de performance?

J'écris une application en ce moment, et trouve que tous les trois ont un délai important entre le tap et l'action (dans ce cas, un changement de navigation). Est-il possible de le rendre plus accrocheur?


40
2017-08-24 12:29


origine


Réponses:


la source: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472, par Nick Wientge

TouchableHighlight

• Ce qu’il fait: Assombrit ou éclaircit l’arrière-plan de l’élément lorsque vous appuyez dessus.

• Quand l'utiliser: Sur iOS pour les éléments touchables ou les boutons qui ont une forme solide ou un arrière-plan, ainsi que sur les éléments ListView.

TouchableOpacity

• Ce qu’il fait: Allège l’opacité de l’élément entier lorsque vous appuyez dessus.

• Quand l'utiliser: Sur iOS pour les éléments accessibles au toucher qui sont des textes autonomes ou des icônes sans couleur de fond.

TouchableNativeFeedback

• Ce qu’il fait: ajoute un effet d’ondulation à l’arrière-plan lorsque vous appuyez dessus.

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


33
2017-09-06 12:57



Eh bien, c'est comment je décide généralement quoi utiliser:

  • Si je construis uniquement pour Android, et que le composant est assez grand pour que les commentaires natifs soient visiblement différents de ceux des autres, alors j'utilise TouchableNativeFeedback
  • Si je veux contrôler l’opacité du composant ou si je veux que le bouton soit coloré lorsque je le touche, et que je ne veux pas contrôler l’état focalisé de certains éléments à l’intérieur du Touchable, alors j’utilise TouchableHighlight. (TouchableOpacity a des parties bizarres quand vous contrôlez l'opacité vous-même).
  • Dans tous les autres cas, j'utilise TouchableOpacity parce que c'est plus "nu" que TouchableHighlight

6
2018-02-23 03:05



Je pense que la principale différence essentielle indiquée dans 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 que les vues répondent correctement aux   touche. En appuyant sur, l'opacité de la vue enveloppée est diminuée,   ce qui permet à la couleur de la sous-couche de montrer, assombrir ou teinter   la vue.

La sous-couche provient de l’enveloppement de l’enfant dans une nouvelle vue, qui peut   affecter la mise en page, et parfois causer des artefacts visuels indésirables, sinon   utilisé correctement, par exemple si le backgroundColor de la vue enveloppée   n'est pas explicitement défini sur une couleur opaque.

TouchableOpacity

TouchableOpacity # Un wrapper pour que les vues répondent correctement aux   touche. En appuyant sur, l'opacité de la vue enveloppée est diminuée,   l'obscurcissement


0
2017-07-15 21:54



Si tu veux

  • surligner le bouton sur presse - utiliser TouchableHighlight
  • changement de l'opacité du bouton sur presse - utilisation TouchableOpacity

-3
2017-08-24 14:08