Dimensiones

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

useWindowDimensions es la API preferida para componentes React. A diferencia de Dimensions, se actualiza automáticamente cuando cambian las dimensiones de la ventana. Esto funciona perfectamente con el paradigma de React.

tsx

import {Dimensions} from 'react-native';

Puedes obtener el ancho y alto de la ventana de la aplicación con el siguiente código:

tsx

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

Aunque las dimensiones están disponibles inmediatamente, pueden cambiar (por ejemplo, debido a rotación del dispositivo, dispositivos plegables, etc.). Por lo tanto, cualquier lógica de renderizado o estilos que dependan de estas constantes deben llamar a esta función en cada renderizado, en lugar de almacenar en caché el valor (por ejemplo, usando estilos en línea en vez de definir valores en un StyleSheet).

Si estás desarrollando para dispositivos plegables o que pueden cambiar el tamaño de pantalla o ventana de la aplicación, puedes usar el event listener disponible en el módulo Dimensions como se muestra en el siguiente ejemplo.

Ejemplo

Referencia

Métodos

addEventListener()

tsx

static addEventListener(
  type: 'change',
  handler: ({
    window,
    screen,
  }: DimensionsValue) => void,
): EmitterSubscription;

Añade un controlador de eventos. Eventos compatibles:

• change: Se activa cuando cambia una propiedad dentro del objeto Dimensions. El argumento para el controlador de eventos es un objeto de tipo DimensionsValue.

---

get()

tsx

static get(dim: 'window' | 'screen'): ScaledSize;

Las dimensiones iniciales se establecen antes de llamar a runApplication, por lo que deberían estar disponibles antes de ejecutar otros require, pero pueden actualizarse posteriormente.

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

Parámetros:

Name	Type	Description
dim Required	string	Name of dimension as defined when calling set. Returns value for the dimension.

En Android, la dimensión window excluirá el tamaño utilizado por la status bar (si no es translúcida) y la bottom navigation bar.

---

Definiciones de tipos

DimensionsValue

Propiedades:

Name	Type	Description
window	ScaledSize	Size of the visible Application window.
screen	ScaledSize	Size of the device's screen.

ScaledSize

Type
object

Propiedades:

Name	Type
width	number
height	number
scale	number
fontScale	number