web-dev-qa-db-fra.com

Largeur de l'écran dans React Native

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

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

react-native
51
Zygro

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

Inclure les dimensions en haut de la page où vous avez inclus l'image, le texte et d'autres composants.

Ensuite, dans vos feuilles de style, vous pouvez utiliser ce qui suit,

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.

68
Pramod Mg

Déclarez simplement ce code pour obtenir la largeur du périphérique

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

C’est peut-être bien évidemment, mais Dimensions est une importation réactive

import { Dimensions } from 'react-native'

Les dimensions ne fonctionneront pas sans cela

36
Aneesh P V

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 ensuite, vous pourriez fournir fulscreen: {width: window.width, height: window.height}, dans votre composant Style. J'espère que cela t'aides

22
Tom Hanson

React Native Dimensions n’est qu’une réponse partielle à cette question. Je suis venu ici pour rechercher la taille réelle des pixels de l’écran et Dimensions vous donne une taille de présentation indépendante de la densité.

Vous pouvez utiliser le rapport de pixels natif réactif pour obtenir la taille réelle des pixels de l'écran.

Vous avez besoin de la déclaration d'importation pour Dimenions et PixelRatio

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

Vous pouvez utiliser la déstructuration des objets pour créer des globales de largeur et de hauteur ou les insérer dans des feuilles de style, comme le suggèrent d'autres personnes, mais attention, cette mise à jour ne sera pas mise à jour lors de la réorientation des périphériques.

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

De React Native Dimension Docs:

Remarque: Bien que les dimensions soient disponibles immédiatement, elles peuvent changer (en raison, par exemple, de> rotation du périphérique). Par conséquent, toute logique de rendu ou style dépendant de ces constantes> doit essayer d'appeler cette fonction à chaque rendu, plutôt que de mettre en cache la valeur> (par exemple utilisant des styles en ligne plutôt que de définir une valeur dans une feuille de style).

PixelRatio Docs lien pour ceux qui sont curieux, mais pas beaucoup plus là.

Pour obtenir réellement 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 les utiliser n'importe où comme ça

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

React Native est livré avec l’API "Dimensions" que nous devons importer de 'react-native'

import { Dimensions } from 'react-native';

Ensuite,

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

Vient de découvrir react-native-responsive-screenrepo here . Je l'ai trouvé très pratique.

react-native-responsive-screen est une petite bibliothèque qui fournit 2 méthodes simples pour que les développeurs natifs de React puissent coder leurs éléments d'interface utilisateur de manière entièrement réactive. Aucune demande de média requise.

Il fournit également une troisième méthode facultative pour la détection de l'orientation de l'écran et la restitution automatique en fonction des nouvelles dimensions.

0
jfunk