Manejo de toques

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Los usuarios interactúan con las aplicaciones móviles principalmente mediante toques. Pueden utilizar combinaciones de gestos, como pulsar un botón, desplazar una lista o hacer zoom en un mapa. React Native proporciona componentes para manejar todo tipo de gestos comunes, además de un completo sistema de respuesta a gestos que permite reconocimiento de gestos más avanzado, pero el componente que probablemente más te interese es el botón básico.

Mostrar un botón básico

Button proporciona un componente de botón básico que se renderiza correctamente en todas las plataformas. El ejemplo mínimo para mostrar un botón se ve así:

tsx

<Button
  onPress={() => {
    console.log('You tapped the button!');
  }}
  title="Press Me"
/>

Esto renderizará una etiqueta azul en iOS y un rectángulo redondeado azul con texto claro en Android. Al presionar el botón se llamará a la función "onPress", que en este caso muestra una alerta emergente. Si lo deseas, puedes especificar una propiedad "color" para cambiar el color de tu botón.

Experimenta con el componente Button usando el ejemplo a continuación. Puedes seleccionar en qué plataforma previsualizar tu aplicación haciendo clic en el interruptor en la esquina inferior derecha y luego en "Tap to Play" para previsualizar la aplicación.

Componentes Touchable

Si el botón básico no se adapta a tu aplicación, puedes crear tu propio botón usando cualquiera de los componentes "Touchable" proporcionados por React Native. Estos componentes permiten capturar gestos de pulsación y mostrar retroalimentación cuando se reconoce un gesto. Sin embargo, estos componentes no incluyen estilos predeterminados, por lo que deberás trabajar un poco para que se vean bien en tu aplicación.

El componente "Touchable" que uses dependerá del tipo de retroalimentación que quieras proporcionar:

• Generalmente, puedes usar TouchableHighlight en cualquier lugar donde usarías un botón o enlace web. El fondo de la vista se oscurecerá cuando el usuario presione el botón.

• Puedes considerar usar TouchableNativeFeedback en Android para mostrar efectos de ondulación que responden al toque del usuario.

• TouchableOpacity puede usarse para proporcionar retroalimentación reduciendo la opacidad del botón, permitiendo ver el fondo mientras el usuario mantiene presionado.

• Si necesitas manejar un gesto de pulsación pero no quieres mostrar retroalimentación visual, usa TouchableWithoutFeedback.

En algunos casos, es posible que quieras detectar cuando un usuario mantiene presionada una vista durante un tiempo determinado. Estas pulsaciones largas pueden manejarse pasando una función a la propiedad onLongPress de cualquier componente "Touchable".

Veamos todos estos en acción:

Desplazamiento y deslizamiento

Los gestos comúnmente usados en dispositivos con pantallas táctiles incluyen deslizamientos (swipes) y arrastres (pans). Estos permiten al usuario desplazarse por listas de elementos o deslizar páginas de contenido. Para estos casos, revisa el componente principal ScrollView.

Problemas conocidos

• react-native#29308: El área táctil nunca se extiende más allá de los límites de la vista padre y en Android no se admite el margen negativo.