Перейти к содержанию

Dimensions

useWindowDimensions — это предпочтительный API для компонентов React. В отличие от Dimensions, он обновляется по мере обновления размеров окна. Это хорошо сочетается с парадигмой React.

1
import { Dimensions } from 'react-native';

Вы можете получить ширину и высоту окна приложения с помощью следующего кода:

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

Хотя размеры доступны сразу, они могут меняться (например, из-за поворота устройства, складывания устройства и т. д.), поэтому любая логика рендеринга или стили, которые зависят от этих констант, должны пытаться вызывать эту функцию при каждом рендеринге, а не кэшировать значение (например, использовать встроенные стили, а не устанавливать значение в StyleSheet).

Если вы нацелены на складные устройства или устройства, которые могут изменять размер экрана или размер окна приложения, вы можете использовать слушатель событий, доступный в модуле Dimensions, как показано в примере ниже.

Пример

Методы

addEventListener()

1
2
3
4
5
6
7
static addEventListener(
  type: 'change',
  handler: ({
    window,
    screen,
  }: DimensionsValue) => void,
): EmitterSubscription;

Добавьте обработчик события. Поддерживаемые события:

  • change: Срабатывает при изменении свойства в объекте Dimensions. Аргументом обработчика события является объект типа DimensionsValue.

get()

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

Начальные размеры устанавливаются до вызова runApplication, поэтому они должны быть доступны до запуска любых других require'ов, но могут быть обновлены позже.

Пример: const {height, width} = Dimensions.get('window');

Параметры:

Имя Тип Описание
dim (обязательно) string Имя размерности, определенное при вызове set. Возвращает значение для размерности.

Для Android размер window будет исключать размер, используемый status bar (если он не полупрозрачный) и bottom navigation bar.

Определения типа

DimensionsValue

Свойства:

Имя Тип Описание
window ScaledSize Размер видимого окна приложения.
screen ScaledSize Размер экрана устройства.

ScaledSize

Тип
object

Свойства:

Имя Тип
width number
height number
scale number
fontScale number

Комментарии