react native - react - ¿Cuándo usar TouchableNativeFeedback, TouchableHighlight o TouchableOpacity?

touchableopacity button example

Question

En React Native, hay al menos tres formas de hacer un botón: TouchableNativeFeedback , TouchableHighlight y TouchableOpacity . También hay TouchableWithoutFeedback , que la documentación establece claramente que no debe usar porque "todos los elementos que responden a la prensa deben tener una respuesta visual cuando se tocan".

• TouchableNativeFeedback es solo para Android y "reemplaza la Vista con otra instancia de RCTView"
• TouchableHighlight "agrega una vista a la jerarquía de vistas"
• TouchableOpacity funciona "sin cambiar la jerarquía de la vista"

¿Hay alguna otra diferencia significativa entre los tres? ¿Es uno de ellos el componente goto? ¿En qué caso debe usar TouchableHighlight sobre TouchableOpacity ? ¿Hay alguna implicación en el rendimiento?

Estoy escribiendo una solicitud en este momento, y encuentro que los tres tienen un retraso significativo entre el toque y la acción (en este caso, un cambio de navegación). ¿Hay alguna manera de hacerlo más ágil?

Answer 1

Bueno, así es como normalmente decido qué usar:

• Si estoy compilando solo para Android, y el componente es lo suficientemente grande como para que los comentarios nativos sean visiblemente diferentes a los demás, entonces uso TouchableNativeFeedback
• Si quiero controlar la opacidad del componente o quiero que el botón tenga color cuando se toca, y no quiero controlar el estado enfocado de algún elemento dentro del Touchable, entonces uso TouchableHighlight . ( TouchableOpacity tiene algunas partes extrañas cuando controlas la opacidad tú mismo).
• En todos los demás casos, uso TouchableOpacity porque es más "desnudo" que TouchableHighlight

Answer 2

Creo que la principal diferencia esencial como se indica en 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. link

TouchableHighlight

TouchableHighlight Un contenedor para hacer que las vistas respondan adecuadamente a los toques. Al presionar hacia abajo, la opacidad de la vista ajustada disminuye, lo que permite que el color subyacente se vea, oscureciendo o teñiendo la vista.

La capa subyacente proviene de envolver al niño en una nueva Vista, lo que puede afectar el diseño y, a veces, causar artefactos visuales no deseados si no se usa correctamente, por ejemplo, si el Color de fondo de la vista ajustada no se establece explícitamente en un color opaco.

TouchableOpacity

TouchableOpacity # Un contenedor para hacer que las vistas respondan adecuadamente a los toques. Al presionar hacia abajo, la opacidad de la vista ajustada disminuye, atenuándola.

Answer 3

Si quieres

• resalte el botón al presionar - use TouchableHighlight
• cambiar la opacidad del botón al presionar - use TouchableOpacity

Answer 4

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

TouchableHighlight

• Qué hace: oscurece o ilumina el fondo del elemento cuando se presiona.

• Cuándo usarlo: en iOS para elementos táctiles o botones que tienen una forma o fondo sólido, y en elementos ListView.

TouchableOpacity

• Qué hace: aclara la opacidad de todo el elemento cuando se presiona.

• Cuándo usarlo: en iOS para elementos táctiles que son texto independiente o iconos sin color de fondo.

TouchableNativeFeedback

• Qué hace: agrega un efecto de onda al fondo cuando se presiona.

• Cuándo usarlo: en Android para casi todos los elementos táctiles.