Largura da tela em React Native

105

Como obtenho a largura da tela no React nativo?

(Eu preciso porque eu uso alguns componentes absolutos que se sobrepõem e sua posição na tela muda com diferentes dispositivos)

react-native

— Zygro
fonte

171

No React-Native, temos uma opção chamada Dimensões

Incluir dimensões na var superior onde você incluiu a imagem e o texto e outros componentes.

Em seguida, em suas folhas de estilo, você pode usar como abaixo,

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

Desta forma, você pode obter a janela e a altura do dispositivo.

— Pramod Mg
fonte

Como posso usar isso se quero fazer a soma da largura de 2 componentes igual a Dimensions.get('window').width?

— Andy95

Basta salvar esses valores globalmente e usá-los em qualquer lugar que não seja seguro quando o dispositivo for girado. Eu recomendo o uso de ganchos de reação em componentes de função

— MJ Studio

77

Simplesmente declare este código para obter a largura do dispositivo

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

Talvez seja obviamente, mas Dimensions é uma importação nativa de reação

import { Dimensions } from 'react-native'

As dimensões não funcionam sem isso

— Aneesh PV
fonte

10

Obrigado! Pessoas em estouro de pilha deixam de fora de onde suas importações estão vindo com muita frequência. Obrigado por incluí-lo, era exatamente o que eu precisava. Não está nos documentos oficiais.

— Jack Davidson

23

Se você tiver um componente de estilo que possa exigir de seu componente, poderá ter algo assim na parte superior do arquivo:

const Dimensions = require('Dimensions');

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

E então você pode fornecer fulscreen: {width: window.width, height: window.height},em seu componente Estilo. Espero que isto ajude

— Tom Hanson
fonte

18

React Native Dimensions é apenas uma resposta parcial a esta pergunta. Vim aqui procurando o tamanho real do pixel da tela, e Dimensions realmente fornece um tamanho de layout independente da densidade.

Você pode usar React Native Pixel Ratio para obter o tamanho real do pixel da tela.

Você precisa da instrução de importação para Dimenions e PixelRatio

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

Você pode usar a desestruturação de objeto para criar globais de largura e altura ou colocá-la em folhas de estilo como outros sugerem, mas cuidado com a reorientação do dispositivo.

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

Dos documentos do React Native Dimension :

Nota: Embora as dimensões estejam disponíveis imediatamente, elas podem mudar (por exemplo, devido à> rotação do dispositivo), portanto, qualquer lógica de renderização ou estilos que dependam dessas constantes> devem tentar chamar essa função em cada renderização, em vez de armazenar o valor em cache> (por exemplo , usando estilos embutidos em vez de definir um valor em uma StyleSheet).

PixelRatio Docs link para quem está curioso, mas não muito mais lá.

Para realmente obter o tamanho da tela, use:

PixelRatio.getPixelSizeForLayoutSize(width);

ou se você não quiser que a largura e a altura sejam globais, você pode usar em qualquer lugar como este

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

— NJensen
fonte

10

O React Native vem com a api "Dimensions" que precisamos importar do 'react-native'

import { Dimensions } from 'react-native';

Então,

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

— Swetank Subham
fonte

9

Resposta de 10 de abril de 2020:

A resposta sugerida usando Dimensionsagora é desencorajada. Veja: https://reactnative.dev/docs/dimensions

A abordagem recomendada é usar o useWindowDimensionsgancho no React; https://reactnative.dev/docs/usewindowdimensions que usa uma API baseada em gancho e também atualizará seu valor quando o valor da tela mudar (na rotação da tela, por exemplo):

import {useWindowDimensions} from 'react-native';

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

Observação: useWindowDimensionsestá disponível apenas no React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61

— Micnguyen
fonte

Não posso usar isso no Expo-Web, mas funciona bem em dispositivos móveis

— Nisharg Shah

3

Apenas duas etapas simples.

import { Dimensions } from 'react-native' no topo do seu arquivo.
const { height } = Dimensions.get('window');

agora a altura da tela da janela é armazenada na variável height.

— Dhruvil Shah
fonte

1

Não sabe por que acabou de responder com a mesma resposta? O que isso realmente adiciona?

— Rambatino

2

Acabei de descobrir o react-native-responsive-screen repo aqui . Achei muito útil.

react-native-responsive-screen é uma pequena biblioteca que fornece 2 métodos simples para que os desenvolvedores React Native possam codificar seus elementos de IU totalmente responsivos. Nenhuma consulta de mídia necessária.

Ele também fornece um terceiro método opcional para detecção de orientação de tela e renderização automática de acordo com novas dimensões.

— jfunk
fonte

0

Acho que usar react-native-responsive-dimensionspode te ajudar um pouco melhor no seu caso.

Você ainda pode obter:

largura do dispositivo usando e responsiveScreenWidth(100)

e

altura do dispositivo usando e responsiveScreenHeight(100)

Você também pode organizar com mais facilidade as localizações de seus componentes absolutos, definindo margens e valores de posição com a proporção de mais de 100% da largura e altura

— picacode
fonte