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 →

información

useWindowDimensions es la API preferida para componentes de React. A diferencia de Dimensions, se actualiza cuando cambian las dimensiones de la ventana. Esto funciona muy bien 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;

nota

Aunque las dimensiones están disponibles inmediatamente, pueden cambiar (por ej. 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 el valor (por ejemplo, usando estilos en línea en lugar de establecer 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.

nota

En Android, la dimensión window se reducirá por el tamaño de la barra de estado (si no es translúcida) y la barra de navegación inferior.

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