Larghezza dello schermo in React Native

105

Come ottengo la larghezza dello schermo in React native?

(Ne ho bisogno perché utilizzo alcuni componenti assoluti che si sovrappongono e la loro posizione sullo schermo cambia con dispositivi diversi)

react-native

— Zygro
fonte

171

In React-Native abbiamo un'opzione chiamata Dimensions

Includi le dimensioni nella variabile superiore dove hai incluso l'immagine, il testo e altri componenti.

Quindi nei tuoi fogli di stile puoi usare come di seguito,

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

In questo modo puoi ottenere la finestra e l'altezza del dispositivo.

— Pramod Mg
fonte

Come posso usarlo se voglio che la somma della larghezza di 2 componenti sia uguale a Dimensions.get('window').width?

— Andy95

Basta salvare questi valori a livello globale e utilizzarli ovunque non sia sicuro quando il dispositivo viene ruotato. Consiglio di utilizzare gli hook di reazione nei componenti di funzione

— MJ Studio

77

Dichiara semplicemente questo codice per ottenere la larghezza del dispositivo

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

Forse è ovvio, ma Dimensions è un'importazione nativa di reazione

import { Dimensions } from 'react-native'

Le dimensioni non funzioneranno senza quello

— Aneesh PV
fonte

10

Grazie! Le persone in overflow dello stack tralasciano troppo spesso la provenienza delle loro importazioni. Grazie per averlo incluso, è esattamente quello di cui avevo bisogno. Non è nei documenti ufficiali.

— Jack Davidson

23

Se hai un componente Style che puoi richiedere dal tuo Component, potresti avere qualcosa del genere all'inizio del file:

const Dimensions = require('Dimensions');

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

E poi potresti fornire fulscreen: {width: window.width, height: window.height},nel tuo componente Style. Spero che questo ti aiuti

— Tom Hanson
fonte

18

React Native Dimensions è solo una risposta parziale a questa domanda, sono venuto qui cercando la dimensione effettiva in pixel dello schermo e le dimensioni in realtà ti danno una dimensione del layout indipendente dalla densità.

Puoi utilizzare React Native Pixel Ratio per ottenere la dimensione effettiva dei pixel dello schermo.

È necessaria la dichiarazione di importazione sia per Dimenions che per PixelRatio

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

Puoi usare la destrutturazione degli oggetti per creare valori globali di larghezza e altezza o inserirli in fogli di stile come altri suggeriscono, ma attenzione che non si aggiornerà al riorientamento del dispositivo.

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

Dai documenti di React Native Dimension :

Nota: sebbene le dimensioni siano immediatamente disponibili, possono cambiare (ad esempio a causa della> rotazione del dispositivo) quindi qualsiasi logica di rendering o stili che dipendono da queste costanti> dovrebbe provare a chiamare questa funzione su ogni rendering, invece di memorizzare nella cache il valore> (ad esempio , utilizzando gli stili in linea anziché impostare un valore in un foglio di stile).

PixelRatio Docs link per chi è curioso, ma non c'è molto di più.

Per ottenere effettivamente le dimensioni dello schermo utilizzare:

PixelRatio.getPixelSizeForLayoutSize(width);

o se non vuoi che larghezza e altezza siano globali puoi usarle ovunque come questo

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

— NJensen
fonte

10

React Native viene fornito con l'API "Dimensions" che dobbiamo importare da "react-native"

import { Dimensions } from 'react-native';

Poi,

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

— Swetank Subham
fonte

9

10 aprile 2020 Risposta:

La risposta suggerita usando Dimensionsè ora scoraggiata. Vedi: https://reactnative.dev/docs/dimensions

L'approccio consigliato è usare l' useWindowDimensionshook in React; https://reactnative.dev/docs/usewindowdimensions che utilizza un'API basata su hook e aggiornerà anche il tuo valore quando il valore dello schermo cambia (ad esempio sulla rotazione dello schermo):

import {useWindowDimensions} from 'react-native';

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

Nota: useWindowDimensionsè disponibile solo da React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61

— micnguyen
fonte

Non posso usarlo in expo-web ma funziona bene sui dispositivi mobili

— Nisharg Shah

3

Solo due semplici passaggi.

import { Dimensions } from 'react-native' all'inizio del file.
const { height } = Dimensions.get('window');

ora l'altezza dello schermo della finestra è memorizzata nella variabile di altezza.

— Dhruvil Shah
fonte

1

Non sei sicuro del motivo per cui hai appena risposto con la stessa risposta? Cosa aggiunge davvero?

— Rambatino

2

Ho appena scoperto il react-native-responsive-screen repository qui . L'ho trovato molto utile.

react-native-responsive-screen è una piccola libreria che fornisce 2 semplici metodi in modo che gli sviluppatori React Native possano codificare i loro elementi dell'interfaccia utente completamente reattivi. Non sono necessarie query multimediali.

Fornisce inoltre un terzo metodo opzionale per il rilevamento dell'orientamento dello schermo e il rendering automatico in base alle nuove dimensioni.

— Jfunk
fonte

0

Penso che l'uso react-native-responsive-dimensionspotrebbe aiutarti un po 'meglio nel tuo caso.

Puoi ancora ottenere:

larghezza del dispositivo utilizzando e responsiveScreenWidth(100)

e

device-height utilizzando e responsiveScreenHeight(100)

Puoi anche organizzare più facilmente le posizioni dei tuoi componenti assoluti impostando margini e valori di posizione proporzionandoli oltre il 100% della larghezza e dell'altezza

— picacode
fonte