Saltar al contenido principal
Versión: 0.77

Mejorar la Experiencia de Usuario

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 →

Configurar campos de texto​

Ingresar texto en teléfonos táctiles es un desafío: pantalla pequeña y teclado virtual. Pero según el tipo de datos que necesites, puedes facilitarlo configurando adecuadamente los campos de texto:

  • Enfocar automáticamente el primer campo

  • Usar texto de placeholder como ejemplo del formato esperado

  • Activar o desactivar autocapitalización y autocorrección

  • Elegir tipo de teclado (ej. email, numérico)

  • Asegurar que el botón de retorno enfoque el siguiente campo o envíe el formulario

Consulta la documentación de TextInput para más opciones de configuración.

Gestionar el diseño cuando el teclado está visible​

El teclado virtual ocupa casi la mitad de la pantalla. Si tienes elementos interactivos que podrían quedar cubiertos, asegúrate de mantenerlos accesibles usando el componente KeyboardAvoidingView.

Ampliar las áreas táctiles​

En móviles es difícil presionar botones con precisión. Asegúrate que todos los elementos interactivos midan al menos 44x44 píxeles. Una forma es dejar suficiente espacio usando valores de estilo como padding, minWidth y minHeight. Alternativamente, usa la prop hitSlop para aumentar el área interactiva sin afectar el diseño. Aquí un ejemplo:

Usar el efecto Ripple de Android​

Android API 21+ usa el efecto ripple de Material Design para dar retroalimentación al tocar áreas interactivas. React Native lo expone mediante el componente TouchableNativeFeedback. Usar este efecto en lugar de cambios de opacidad o resaltado hará que tu app se sienta más nativa en la plataforma. Sin embargo, ten cuidado porque no funciona en iOS ni en Android API < 21, así que necesitarás componentes Touchable alternativos para iOS. Puedes usar librerías como react-native-platform-touchable para manejar estas diferencias.

Bloquear orientación de pantalla​

Las múltiples orientaciones funcionan bien por defecto, a menos que uses la API Dimensions sin gestionar cambios de orientación. Si no quieres soportar múltiples orientaciones, puedes bloquear la pantalla en vertical (portrait) u horizontal (landscape).

En iOS: en la pestaña General > sección Deployment Info de Xcode, activa las Device Orientation que quieras soportar (asegúrate de seleccionar iPhone en el menú Devices). En Android: abre AndroidManifest.xml y dentro del elemento activity agrega 'android:screenOrientation="portrait"' para vertical u 'android:screenOrientation="landscape"' para horizontal.

Más recursos

Material Design y las Human Interface Guidelines son excelentes recursos para aprender sobre diseño en plataformas móviles.