Ancho de pantalla en React Native

¿Cómo obtengo el ancho de la pantalla en React native?

(Lo necesito porque utilizo algunos componentes absolutos que se superponen y su posición en la pantalla cambia con diferentes dispositivos)

En React-Native tenemos una opción llamada Dimensiones

Incluya Dimensiones en la var superior donde ha incluido la Imagen, el Texto y otros componentes.

Luego, en sus hojas de estilo, puede usar lo siguiente,

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

De esta manera puede obtener la ventana y la altura del dispositivo.

Simplemente declare este código para obtener el ancho del dispositivo

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

Tal vez sea obvio, pero Dimensions es una importación nativa de reacción

import { Dimensions } from 'react-native'

Las dimensiones no funcionarán sin eso

Si tiene un componente de estilo que puede requerir de su componente, entonces podría tener algo como esto en la parte superior del archivo:

const Dimensions = require('Dimensions');

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

Y luego podría proporcionar fulscreen: {width: window.width, height: window.height},en su componente Estilo. Espero que esto ayude

React Native Dimensions es solo una respuesta parcial a esta pregunta, vine aquí buscando el tamaño de píxel real de la pantalla, y las dimensiones en realidad le brindan un tamaño de diseño independiente de la densidad.

Puede usar React Native Pixel Ratio para obtener el tamaño de píxel real de la pantalla.

Necesita la declaración de importación para Dimenions y PixelRatio

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

Puede usar la desestructuración de objetos para crear globales de ancho y alto o ponerlo en hojas de estilo como sugieren otros, pero tenga en cuenta que esto no se actualizará en la reorientación del dispositivo.

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

De React Native Dimension Docs:

Nota: Aunque las dimensiones están disponibles de inmediato, pueden cambiar (por ejemplo, debido a la> rotación del dispositivo), por lo que cualquier lógica o estilo de representación que dependa de estas constantes> debería intentar llamar a esta función en cada representación, en lugar de almacenar en caché el valor> (por ejemplo , usando estilos en línea en lugar de establecer un valor en una StyleSheet).

Enlace de PixelRatio Docs para aquellos que tienen curiosidad, pero no hay mucho más.

Para obtener realmente el uso del tamaño de la pantalla:

PixelRatio.getPixelSizeForLayoutSize(width);

o si no desea que el ancho y la altura sean globales, puede usarlo en cualquier lugar como este

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

React Native viene con la api "Dimensions" que necesitamos importar desde 'react-native'

import { Dimensions } from 'react-native';

Luego,

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

Respuesta del 10 de abril de 2020:

DimensionsAhora se desaconseja el uso de la respuesta sugerida . Ver: https://reactnative.dev/docs/dimensions

El enfoque recomendado es usar el useWindowDimensionsgancho en React; https://reactnative.dev/docs/usewindowdimensions que usa una API basada en hook y también actualizará su valor cuando cambie el valor de la pantalla (en la rotación de la pantalla, por ejemplo):

import {useWindowDimensions} from 'react-native';

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

Nota: useWindowDimensionssolo está disponible en React Native 0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61

Solo dos sencillos pasos.

1. import { Dimensions } from 'react-native' en la parte superior de su archivo.
2. const { height } = Dimensions.get('window');

ahora la altura de la pantalla de la ventana se almacena en la variable de altura.

Acabo de descubrir el react-native-responsive-screen repositorio aquí . Lo encontré muy útil.

react-native-responsive-screen es una pequeña biblioteca que proporciona 2 métodos simples para que los desarrolladores de React Native puedan codificar sus elementos de interfaz de usuario con total capacidad de respuesta. No se necesitan consultas de medios.

También proporciona un tercer método opcional para la detección de la orientación de la pantalla y la reproducción automática de acuerdo con las nuevas dimensiones.

Creo que usarlo react-native-responsive-dimensionspodría ayudarte un poco mejor en tu caso.

Todavía puede obtener:

ancho del dispositivo usando y responsiveScreenWidth(100)

y

altura del dispositivo usando y responsiveScreenHeight(100)

También puede organizar más fácilmente las ubicaciones de sus componentes absolutos estableciendo márgenes y valores de posición proporcionándolos sobre el 100% del ancho y alto.