React Native TouchableOpacity onPress no funciona en Android

5 minutos de lectura

TouchabelOpacity funciona bien en iOS, pero el método onPress no me funciona en Android.

Mi versión nativa de reacción: 0.57.4

Mi código:

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <Ionicons name="ios-menu" color="white" size={30} />
  </TouchableOpacity>
);

  • Puedo confirmar que funciona bien en Android con la versión 0.57.7. ¿Puede permitirse el lujo de actualizar?

    – Benoit

    29 de noviembre de 2018 a las 23:16

Tuve un problema similar. Presta atención desde dónde importa tu “TouchableOpacity”. Cuando cambié “TouchableOpacity” de “react-native-gesture-handler” a “react-native”, funcionó para mí (para la plataforma Android)

  • Recomiendo agregar una regla de importaciones no restringidas de eslint que prohíba la importación desde react-native-gesture-handler. 'no-restricted-imports': [ 'error', { paths: [ { name: 'react-native-gesture-handler', importNames: ['TouchableOpacity'], message: 'Import TouchableOpacity from react-native instead', }, ], }, ],

    – Sampo

    7 de abril de 2020 a las 8:04


  • Para mí, funcionó cuando cambié de react-native a react-native-gesture-handler

    – Amogh Jahagirdar

    6 de septiembre de 2020 a las 7:54

  • esta importación automática del controlador de gestos rn es increíblemente molesta

    – Jován

    19 de marzo de 2021 a las 15:54

  • gracias por sus comentarios chicos, estoy muy feliz de ayudarlos y salvarles el día con esta breve pero importante respuesta

    – Alí

    29 de mayo de 2021 a las 7:12


  • Podría haberme tomado horas averiguarlo. Gracias por mencionarlo. @Ali

    – Ahmad Habib

    21 oct 2022 a las 11:18

Tuve el mismo problema, todos los botones TouchableOpacity funcionaban bien en la compilación de iOS, pero había uno en Android que no se activaba. Me topé con esta respuesta aquí que mencionaba que position: absolute estropearía el gatillo. Resolvió mi problema.

  • Resolví mi problema de una manera similar. En términos de jerarquía, tenía una vista dentro de una opacidad táctil; Estaba agregando posicionamiento a la Vista asumiendo que Touchable Opacity también adoptaría su posicionamiento secundario, y ahí es donde estaba mi problema, tocar la vista no ejecutaría mi método porque Touchable Opacity tenía un posicionamiento diferente al de su hijo. Lo resolví haciendo posicionamiento en Touchable Opacity en lugar de View. Espero que esto ayude a alguien.

    usuario4414149

    20 de febrero de 2020 a las 14:40


  • Este fue mi problema también. La posición absoluta impidió que se activara la función onPress. Gracias por la ayuda homie.

    – Jo Mamá

    2 de junio de 2021 a las 1:06

  • Esto funciona para mí, muchas gracias!

    – olawalejuwonm

    10/01/2022 a las 21:00

  • Chris, te mereces una medalla.

    – Yuniac

    2 de septiembre de 2022 a las 14:27

avatar de usuario de tae ha
tae ha

terminación el servidor de metro (en caso de que se esté ejecutando actualmente) y luego correr todo de nuevo (como a continuación) funcionó para mí.


en la consola que ejecuta el servidor metro, Terminar él

ctrl + c

luego en la otra consola, correr tu aplicación

react-native run-android

o

npx react-native run-android

Avatar de usuario de Noble Kuz
Noble Kuz

Compruebe la biblioteca desde la que está importando la opacidad táctil. Importarlo desde “react-native”. no de “react-native-gesture-handler”

Utilizar esta

import { TouchableOpacity } from 'react-native';

en lugar de esto

import { TouchableOpacity } from 'react-native-gesture-handler';

Para mí, funcionaba, pero el área táctil era muy pequeña. De alguna manera, el área en iOS era más grande que en Android.

Terminé aumentando el área táctil usando el hitSlop propiedad de la siguiente manera:

<TouchableOpacity
    onPress={() => {}}
    hitSlop={{ top: 30, bottom: 30, left: 30, right: 30 }}
>
    <Icon name="eye" />
</TouchableOpacity>

  • Todo el mundo parece cambiar rápidamente las importaciones sin preguntar por qué lo soluciona. En mi caso, tuve que usar la versión nativa ya que la versión react-native-gesture-handler no disfrutaba de la animación. La respuesta de Mateo fue el enfoque correcto para mí, ya que el área de impacto en Android era cero, mientras que en iOS adoptaba el tamaño de sus hijos. En mi caso, el contenido tenía una altura fija, por lo que solo podía establecer la altura de TouchableOpacity para que coincidiera.

    – tdous

    6 de enero de 2022 a las 14:20

Avatar de usuario de Aayush Bhattacharya
Aayush Bhattacharya

en mi caso, importé TouchableOpacity de ‘react-native-gesture-handler’ después de agregarlo de ‘react-native’ funcionó

  • Todo el mundo parece cambiar rápidamente las importaciones sin preguntar por qué lo soluciona. En mi caso, tuve que usar la versión nativa ya que la versión react-native-gesture-handler no disfrutaba de la animación. La respuesta de Mateo fue el enfoque correcto para mí, ya que el área de impacto en Android era cero, mientras que en iOS adoptaba el tamaño de sus hijos. En mi caso, el contenido tenía una altura fija, por lo que solo podía establecer la altura de TouchableOpacity para que coincidiera.

    – tdous

    6 de enero de 2022 a las 14:20

Avatar de usuario de Matt Yoon
Matt Yoon

Verifique si presionar el Touchable por más tiempo funciona. En mi caso, estaba probando en un teléfono Android y renderizando múltiples TouchableOpacity ralentizó el teléfono que si tocaba el componente demasiado brevemente, no se registraría como una pulsación válida.

Según el documento oficial de onPresscancelará la pulsación inválida:
https://reactnative.dev/docs/touchablewithoutfeedback#onpress

En ese caso puedes usar onPressOut o onPressIn en lugar de onPress para que tu toque sea siempre válido.

  • muchas gracias, eso funcionó para mí y estuve tan cerca de volverme loco 🙂

    – yasin demir

    21 de septiembre de 2021 a las 7:59

  • Tuve un problema similar solo para los dispositivos de la serie Samsung S. Mi TochableOpacity funcionaba de manera inconsistente y luché por encontrar una solución durante un par de meses. Esto lo arregló. Gracias

    – Sara Raj

    10 oct 2021 a las 9:04

¿Ha sido útil esta solución?