Класс Dimensions

Класс Dimensions не рисует элементы на экране. Метод get возвращает объект { width, height, scale, fontScale } для 'window' или 'screen'. Метод addEventListener вызывает обработчик при повороте и смене размера.

Синтаксис

import { Dimensions } from 'react-native';

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

Методы

Метод	Описание
`get`	Возвращает текущие размеры окна или всего экрана.
`addEventListener`	Подписывает функцию на событие `'change'`.

Пример

Давайте выведем ширину окна на экран:

import { View, Text, Dimensions } from 'react-native';

export default function App() {
	const { width } = Dimensions.get('window');

	return (
		<View>
			<Text>{String(width)}</Text>
		</View>
	);
}

На экране число ширины окна приложения в пунктах.

Пример

Давайте сравним окно и весь экран:

import { View, Text, Dimensions } from 'react-native';

export default function App() {
	const win = Dimensions.get('window');
	const scr = Dimensions.get('screen');

	return (
		<View>
			<Text>{String(win.width)}</Text>
			<Text>{String(scr.width)}</Text>
		</View>
	);
}

На экране две строки с шириной окна и шириной экрана.

Смотрите также

функция useWindowDimensions,
которая обновляет размер внутри компонента
класс PixelRatio,
который переводит пункты в физические пиксели
метод get,
который читает width и height
компонент View,
который занимает место по размеру родителя