React Native - Touchables et dimensions de l'écran

React Native rend le processus de développement d'une application qui fonctionne à la fois sur les appareils Android et iOS beaucoup plus facile qu'il ne l'était autrefois. Alors qu'auparavant vous deviez travailler avec au moins deux langages de programmation et des API très différentes, React Native en inclut quelques-uns utiles prêts à l'emploi.

Voici un aperçu de deux qui vous aideront à créer votre prochaine application.

Touchables

Certaines des principales caractéristiques des appareils mobiles tournent autour des interactions tactiles de l'utilisateur. La manière dont une application mobile gère et répond à ces interactions peut faire ou défaire l'expérience de l'utilisateur.

React Native est livré avec un Buttoncomposant qui fonctionne pour de nombreuses onPressinteractions standard . Par défaut, il donnera des commentaires à l'utilisateur en modifiant l'opacité pour indiquer que le bouton a été enfoncé. Usage:

Pour les cas d'utilisation plus complexes, React Native intègre des API pour gérer les interactions de presse appelées Touchables.

TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback

Chacun de ces composants tactiles peut être stylé et utilisé avec une bibliothèque, comme le module intégré Animated, vous permettant de créer vos propres types de commentaires d'utilisateurs personnalisés.

Quelques exemples d'utilisation de ces composants:

// with images    // with text  Hello 

Vous pouvez également gérer différents types d'appuis sur des boutons. Par défaut, les boutons et les touches tactiles sont configurés pour gérer les taps réguliers, mais vous pouvez également désigner une fonction pour appeler pour des interactions de pression et de maintien, par exemple.

Pour voir tous les accessoires disponibles et comment ces composants fonctionnent, vous pouvez consulter le code source JavaScript pour Touchables ici.

Dimensions de l'écran

React Native utilise des points par pouce (PPP) pour mesurer la taille de l'interface utilisateur (UI) et tout ce qui est affiché sur l'interface utilisateur. Ce type de mesure permet à une application d'avoir une apparence uniforme sur différentes tailles d'écran et densités de pixels.

Pour les cas d'utilisation standard, les applications peuvent être développées sans avoir à connaître les spécificités de l'appareil de l'utilisateur (par exemple, la densité de pixels) puisque les éléments de l'interface utilisateur seront mis à l'échelle automatiquement.

Lorsque cela est nécessaire, des API sont disponibles PixelRatiopour vous aider à connaître la densité de pixels de l'appareil de l'utilisateur.

Pour obtenir la hauteur / largeur de la fenêtre ou de l'écran de l'appareil d'un utilisateur, React Native a une API appelée Dimensions.

import { Dimensions } from 'react-native';

Voici les méthodes Dimensionsfournies par l' API:

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

Remarque: il y a eu des problèmes connus dans le passé avec l'API Dimensions, comme le fait de ne pas renvoyer les informations correctes lorsqu'un utilisateur fait pivoter son appareil.Il est préférable de vous assurer de tester cela sur des appareils réels avant de déployer une application.

Plus d'informations sur le design réactif:

  • Cours de conception adaptative gratuit
  • Meilleurs tutoriels Bootstrap pour la conception Web réactive
  • Comment penser de manière réactive
  • Guide des images réactives
  • Apprenez le design réactif en 5 minutes