Largeur de l'écran dans React Native

Comment obtenir la largeur de l'écran dans React native?

(J'en ai besoin car j'utilise des composants absolus qui se chevauchent et leur position à l'écran change avec différents appareils)

Dans React-Native, nous avons une option appelée Dimensions

Incluez les dimensions dans la variable supérieure où vous avez inclus l'image, le texte et d'autres composants.

Ensuite, dans vos feuilles de style, vous pouvez utiliser comme ci-dessous,

ex: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}

De cette façon, vous pouvez obtenir la fenêtre et la hauteur de l'appareil.

Déclarez simplement ce code pour obtenir la largeur de l'appareil

let deviceWidth = Dimensions.get('window').width

C'est peut-être évidemment mais, Dimensions est une importation native de réaction

import { Dimensions } from 'react-native'

Les dimensions ne fonctionneront pas sans cela

Si vous avez un composant de style que vous pouvez exiger de votre composant, vous pourriez avoir quelque chose comme ceci en haut du fichier:

const Dimensions = require('Dimensions');

const window = Dimensions.get('window');

Et puis vous pouvez fournir fulscreen: {width: window.width, height: window.height},dans votre composant Style. J'espère que cela t'aides

React Native Dimensions n'est qu'une réponse partielle à cette question, je suis venu ici à la recherche de la taille réelle des pixels de l'écran, et les dimensions vous donnent en fait une taille de mise en page indépendante de la densité.

Vous pouvez utiliser React Native Pixel Ratio pour obtenir la taille réelle des pixels de l'écran.

Vous avez besoin de l'instruction d'importation pour Dimenions et PixelRatio

import { Dimensions, PixelRatio } from 'react-native';

Vous pouvez utiliser la déstructuration d'objet pour créer des globaux de largeur et de hauteur ou le mettre dans des feuilles de style comme d'autres le suggèrent, mais attention, cela ne sera pas mis à jour lors de la réorientation de l'appareil.

const { width, height } = Dimensions.get('window');

À partir de la documentation React Native Dimension :

Remarque: Bien que les dimensions soient disponibles immédiatement, elles peuvent changer (par exemple en raison de> la rotation de l'appareil), donc toute logique de rendu ou styles qui dépendent de ces constantes> devrait essayer d'appeler cette fonction sur chaque rendu, plutôt que de mettre en cache la valeur> (par exemple , en utilisant des styles en ligne plutôt que de définir une valeur dans une feuille de style).

Lien PixelRatio Docs pour ceux qui sont curieux, mais pas beaucoup plus.

Pour obtenir la taille de l'écran, utilisez:

PixelRatio.getPixelSizeForLayoutSize(width);

ou si vous ne voulez pas que la largeur et la hauteur soient globales, vous pouvez l'utiliser n'importe où comme celui-ci

PixelRatio.getPixelSizeForLayoutSize(Dimensions.get('window').width);

React Native est fourni avec l'API "Dimensions" que nous devons importer depuis "react-native"

import { Dimensions } from 'react-native';

Ensuite,

<Image source={pic} style={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}></Image>

10 avril 2020 Réponse:

La réponse suggérée en utilisant Dimensionsest maintenant déconseillée. Voir: https://reactnative.dev/docs/dimensions

L'approche recommandée utilise le useWindowDimensionshook dans React; https://reactnative.dev/docs/usewindowdimensions qui utilise une API basée sur un hook et mettra également à jour votre valeur lorsque la valeur de l'écran change (sur la rotation de l'écran par exemple):

import {useWindowDimensions} from 'react-native';

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

Remarque: useWindowDimensionsest uniquement disponible à partir de React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61

Seulement deux étapes simples.

1. import { Dimensions } from 'react-native' en haut de votre dossier.
2. const { height } = Dimensions.get('window');

maintenant la hauteur de l'écran de la fenêtre est stockée dans la variable de hauteur.

Je viens de découvrir le react-native-responsive-screen repo ici . Je l'ai trouvé très pratique.

react-native-responsive-screen est une petite bibliothèque qui fournit 2 méthodes simples afin que les développeurs de React Native puissent coder leurs éléments d'interface utilisateur entièrement réactifs. Aucune requête multimédia requise.

Il fournit également une troisième méthode optionnelle pour la détection de l'orientation de l'écran et le rendu automatique selon de nouvelles dimensions.

Je pense que l'utilisation react-native-responsive-dimensionspourrait vous aider un peu mieux sur votre cas.

Vous pouvez toujours obtenir:

largeur de l'appareil en utilisant et responsiveScreenWidth(100)

et

hauteur de l'appareil en utilisant et responsiveScreenHeight(100)

Vous pouvez également organiser plus facilement les emplacements de vos composants absolus en définissant des marges et des valeurs de position en les proportionnant sur 100% de la largeur et de la hauteur