Класс PixelRatio

Класс PixelRatio не рисует элементы на экране. Метод get возвращает коэффициент плотности, например 2 или 3. Методы roundToNearestPixel, getPixelSizeForLayoutSize и getFontScale работают с размерами и масштабом шрифта системы.

Синтаксис

import { PixelRatio } from 'react-native';

const ratio = PixelRatio.get();

Методы

Метод	Описание
`get`	Возвращает коэффициент плотности экрана.
`roundToNearestPixel`	Округляет пункты к ближайшему физическому пикселю.
`getPixelSizeForLayoutSize`	Переводит пункты раскладки в физические пиксели.
`getFontScale`	Возвращает масштаб шрифта, заданный в настройках системы.

Пример

Давайте выведем коэффициент плотности на экран:

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

export default function App() {
	return (
		<View>
			<Text>{String(PixelRatio.get())}</Text>
		</View>
	);
}

На экране число вроде 2 или 3 для текущего устройства.

Пример

Давайте зададим тонкую линию в один физический пиксель:

import { View, PixelRatio, StyleSheet } from 'react-native';

export default function App() {
	return <View style={styles.line} />;
}

const styles = StyleSheet.create({
	line: {
		height: PixelRatio.roundToNearestPixel(1),
		backgroundColor: '#112233',
	},
});

На экране горизонтальная полоска без размытой толщины на Retina.

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

класс Dimensions,
который отдаёт scale окна
класс StyleSheet,
у которого значение hairlineWidth тоже строится от плотности
метод getFontScale,
который читает масштаб текста системы
функция useWindowDimensions,
которая возвращает fontScale окна