React Native: elementos táctiles y dimensiones de la pantalla

React Native hace que el proceso de desarrollo de una aplicación que funcione tanto en dispositivos Android como iOS sea mucho más fácil de lo que era antes. Si bien antes tenía que trabajar con al menos dos lenguajes de programación y API muy diferentes, React Native incluye algunas útiles listas para usar.

Aquí hay un resumen de dos que lo ayudarán a crear su próxima aplicación.

Tocables

Algunas de las principales características de los dispositivos móviles giran en torno a las interacciones táctiles del usuario. La forma en que una aplicación móvil maneja y responde a estas interacciones puede hacer o deshacer la experiencia del usuario.

React Native se envía con un Buttoncomponente que funciona para muchas onPressinteracciones estándar . De forma predeterminada, le dará comentarios al usuario cambiando la opacidad para mostrar que se presionó el botón. Uso:

Para casos de uso más complejos, React Native tiene API integradas para manejar las interacciones de prensa llamadas Touchables.

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

Cada uno de estos componentes Touch se puede diseñar y usar con una biblioteca, como la integrada Animated, lo que le permite crear sus propios tipos de comentarios de usuario personalizados.

Algunos ejemplos del uso de estos componentes:

// with images    // with text  Hello 

También puede manejar diferentes tipos de pulsaciones de botones. De forma predeterminada, los botones y los elementos táctiles están configurados para manejar toques regulares, pero también puede indicar una función para solicitar interacciones de presionar y mantener presionada, por ejemplo.

Para ver todos los accesorios disponibles y cómo funcionan estos componentes, puede consultar el código fuente de JavaScript para Touchables aquí.

Dimensiones de la pantalla

React Native usa puntos por pulgada (DPI) para medir el tamaño de la interfaz de usuario (UI) y todo lo que se muestra en la interfaz de usuario. Este tipo de medición permite que una aplicación se vea uniforme en varios tamaños de pantalla y densidades de píxeles.

Para casos de uso estándar, las aplicaciones se pueden desarrollar sin tener que conocer los detalles del dispositivo del usuario (por ejemplo, densidad de píxeles) ya que los elementos de la interfaz de usuario se escalarán automáticamente.

Cuando es necesario, hay API disponibles PixelRatiopara ayudarlo a averiguar la densidad de píxeles del dispositivo del usuario.

Para obtener la altura / ancho de la ventana o pantalla del dispositivo de un usuario, React Native tiene una API llamada Dimensions.

import { Dimensions } from 'react-native';

Estos son los métodos que Dimensionsproporciona la API:

Dimensions.get('window').height; Dimensions.get('window').width; Dimensions.get('screen').height; Dimensions.get('screen').width;

Nota: Ha habido algunos problemas conocidos en el pasado con la API de Dimensions, como no devolver la información correcta cuando un usuario gira su dispositivo.Es mejor asegurarse de probar esto en dispositivos reales antes de implementar una aplicación.

Más información sobre diseño receptivo:

  • Curso gratuito de diseño receptivo
  • Los mejores tutoriales de Bootstrap para diseño web receptivo
  • Cómo pensar de manera receptiva
  • Guía para imágenes receptivas
  • Aprenda el diseño receptivo en 5 minutos