Largura da tela em React Native

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)

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.

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

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

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);

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>

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

Apenas duas etapas simples.

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

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

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.

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