Метод roundToNearestPixel

Метод roundToNearestPixel класса PixelRatio принимает размер в пунктах раскладки. Возвращает число, которое на экране совпадает с границей физического пикселя. Так линии и блоки не выглядят размытыми.

Синтаксис

const res = PixelRatio.roundToNearestPixel(11.5);

Параметры

Параметр	Описание
`layoutSize`	Размер в пунктах до округления.

Пример

Давайте округлим ширину и выведем результат:

import { PixelRatio } from 'react-native';

const res = PixelRatio.roundToNearestPixel(11.5);
console.log(res);

Результат выполнения кода:

11.5

Точное число зависит от PixelRatio.get.

Пример

Давайте нарисуем разделитель с округлённой высотой:

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

export default function App() {
	return (
		<View>
			<Text>abcde</Text>
			<View style={styles.rule} />
			<Text>12345</Text>
		</View>
	);
}

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

На экране два текста и чёткая линия между ними.

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

метод getPixelSizeForLayoutSize,
который переводит пункты в пиксели без округления к сетке
метод get,
который задаёт шаг сетки
класс StyleSheet,
у которого hairlineWidth уже учитывает плотность
класс PixelRatio,
который содержит все методы плотности