Размеры без пикселей: dp, проценты, PixelRatio

В CSS из части II у длины всегда есть единица: px, rem, %, vw. В стиле React Native у числа единицы нет, но и пикселями матрицы оно не является. На iOS такие числа — точки (points), на Android — dp, пиксели, не зависящие от плотности. В исходнике PixelRatio так и написано: размер раскладки — в dp, пиксельный размер — в px. Смысл у обеих платформ один: 1 dp — примерно одна и та же физическая величина на любом экране, а сколько точек матрицы за ней стоит, решает плотность. На Android dp отсчитывают от 160 точек на дюйм: у экрана 420 dpi плотность 420 / 160 = 2,625, и 1 dp там — 2,625 пикселя.

Веб-разработчику это знакомо: CSS-пиксель тоже не пиксель матрицы, и на экране с devicePixelRatio 2 блок в 100px занимает 200 физических точек. Поэтому react-native-web просто дописывает к числу px — в статье про StyleSheet width: 40 превратилось в width: 40px, — и предпросмотр выглядит верно. Плотность React Native отдаёт через PixelRatio.get(), и в обеих реализациях это одно и то же поле: Dimensions.get("window").scale.

Плотность в песочнице — devicePixelRatio вашего экрана, у каждого читателя своя, и печатать её в примере бесполезно. Поэтому в подложке появился хелпер setDevice: он подменяет то, что кадр сообщает о своём окне и плотности, — примерно как режим устройства в инструментах разработчика браузера. Что не передано, остаётся прежним. Сам кадр при этом не меняется: раскладка идёт в его настоящей ширине, меняются только ответы Dimensions и PixelRatio, а Platform.OS как был "web", так и остаётся — подменяется экран, а не платформа. Прогноз: значок упражнения 24 × 24 и пять экранов — что сообщит onLayout и сколько физических пикселей займёт значок на каждом экране?

// setDevice — хелпер подложки: кадр начинает сообщать размер и плотность другого экрана
declare function setDevice(device: { width?: number; height?: number; scale?: number }): void;
const { View, PixelRatio } = ReactNative;

// значок упражнения: 24 × 24, как в макете
mount(
  <View
    onLayout={(e) => console.log("onLayout:", e.nativeEvent.layout.width, "×", e.nativeEvent.layout.height)}
    style={{ width: 24, height: 24, backgroundColor: "#2563eb" }}
  />,
);

// плотности взяты из комментария к PixelRatio в исходнике react-native
const screens = [
  { name: "Android mdpi", scale: 1 },
  { name: "Android hdpi", scale: 1.5 },
  { name: "iPhone 8", scale: 2 },
  { name: "iPhone X", scale: 3 },
  { name: "Nexus 6", scale: 3.5 },
];
for (const { name, scale } of screens) {
  setDevice({ scale });
  console.log(name, "→ плотность", PixelRatio.get(), "→", PixelRatio.getPixelSizeForLayoutSize(24), "px");
}

onLayout сообщил 24 × 24 и сообщит столько же на любом телефоне: раскладка живёт в dp, Yoga считает в dp и отдаёт их же. Физические пиксели появляются только на выходе — getPixelSizeForLayoutSize умножает на плотность и округляет до целого: 24, 36, 48, 72, 84. Строка onLayout пришла последней: цикл выполнился сразу, а событие раскладки приходит после отрисовки.

Физические пиксели нужны там, где размер уходит за пределы раскладки. Главный случай — картинки. Фото упражнения 48 × 48 на экране плотности 3 должно иметь 144 × 144 точки, иначе оно выйдет мыльным. Поэтому миниатюру с сервера просят размером getPixelSizeForLayoutSize(48), а не 48 — такой пример стоит прямо в комментарии к PixelRatio. Картинки из самого проекта кладут тремя файлами — icon.png, icon@2x.png, icon@3x.png, — и файл под плотность выбирает React Native; каким правилом, разберёт задача номер два.

Считает Yoga в дробных dp, а результат кладёт на сетку физических пикселей: в конце расчёта CalculateLayout.cpp вызывает roundLayoutResultsToPixelGrid, а шаг сетки задаёт плотность — на iOS RCTFabricSurface.mm передаёт pointScaleFactor = RCTScreenScale(), на Android SurfaceHandlerBinding.cpp — pixelDensity. Поэтому на телефоне плотности 3 onLayout отдаёт размеры, кратные трети dp. В предпросмотре округляет браузер, по своим правилам.

Второй способ задать размер без пикселей — проценты. В типе они записаны строго: DimensionValue — это число, "auto", строка вида `${number}%`, анимированное значение или null. Считается процент от родителя, как в CSS: ширина и высота — от внутренней области родителя, за вычетом его отступов и рамки, а padding — от ширины родителя, даже сверху и снизу. У Yoga так же: в Style.h отступ по любой оси разрешается от одной величины — ширины, параметра widthSize.

Карточка тренировки «Подхода»: колонка шириной 240, в ней карточка с отступом "5%", внутри квадратная миниатюра на четверть ширины, полоса прогресса «3 подхода из 4» и блок в полвысоты. aspectRatio — ещё одна величина без пикселей: отношение ширины к высоте, и 1 даёт квадрат. Прогноз: размеры карточки и трёх её детей?

type LayoutChangeEvent = import("react-native").LayoutChangeEvent;
const { View } = ReactNative;

const seen: Record<string, string> = {};
function track(name: string) {
  seen[name] = "";
  return (e: LayoutChangeEvent) => {
    const { width, height } = e.nativeEvent.layout;
    seen[name] = width + " × " + height;
  };
}

// в тренировке 4 подхода, сделано 3
const done = 3;
const planned = 4;

mount(
  <View style={{ width: 240 }}>
    <View onLayout={track("карточка")} style={{ padding: "5%", backgroundColor: "#f4f1ea" }}>
      <View onLayout={track("миниатюра")} style={{ width: "25%", aspectRatio: 1, backgroundColor: "#c7d2fe" }} />
      <View onLayout={track("прогресс")} style={{ width: `${(done / planned) * 100}%`, height: 6, backgroundColor: "#2563eb" }} />
      <View onLayout={track("полвысоты")} style={{ height: "50%", backgroundColor: "#fca5a5" }} />
    </View>
  </View>,
);
setTimeout(() => {
  for (const [name, box] of Object.entries(seen)) console.log(name, "→", box);
}, 300);

Отступ "5%" посчитан от ширины колонки: 240 × 0,05 = 12, со всех четырёх сторон — сверху и снизу тоже от ширины. Миниатюра — 25% уже не от 240, а от того, что осталось внутри карточки: 240 − 2 × 12 = 216, четверть — 54, и aspectRatio: 1 вывел из ширины такую же высоту. Прогресс — 75% от тех же 216, то есть 162. Строку процента собрал шаблон `${(done / planned) * 100}%`, и компилятор его принял: шаблонная строка на месте типа `${number}%` получает этот тип. А блок height: "50%" схлопнулся в 0: высота карточки не задана, половину считать не от чего — в CSS и у Yoga одинаково. Карточка вышла 240 × 84: 12 + 54 + 6 + 0 + 12.

Проценты и flex занимают одну нишу — размер относительно родителя, — но считают по-разному. Процент берётся от родителя целиком, а flex делит свободное место — то, что осталось после gap, отступов и соседей с заданной шириной. Две колонки по "50%" в ряду 300 с gap: 12 вылезут за край на 12: по 150 каждая, и вторая начнётся с 162. Две колонки с flex: 1 поделят оставшиеся 288 по 144. Для сеток с промежутками надёжнее flex, процент — когда долю задают данные, как у прогресса.

Коварство процентов в том, что строка в width выглядит как CSS, и рука сама пишет туда другие единицы. Прогноз: какой ширины окажутся четыре полосы в колонке 300?

type LayoutChangeEvent = import("react-native").LayoutChangeEvent;
const { View } = ReactNative;

const seen: Record<string, string> = {};
function track(name: string) {
  seen[name] = "";
  return (e: LayoutChangeEvent) => {
    seen[name] = "ширина " + e.nativeEvent.layout.width;
  };
}

// привычки из CSS: единицы прямо в строке ширины; колонка — 300
mount(
  <View style={{ width: 300, gap: 4 }}>
    <View onLayout={track("50px")} style={{ width: "50px", height: 8, backgroundColor: "#c7d2fe" }} />
    <View onLayout={track("2rem")} style={{ width: "2rem", height: 8, backgroundColor: "#c7d2fe" }} />
    <View onLayout={track("calc(100% - 32px)")} style={{ width: "calc(100% - 32px)", height: 8, backgroundColor: "#c7d2fe" }} />
    <View onLayout={track("строка 50")} style={{ width: "50", height: 8, backgroundColor: "#c7d2fe" }} />
  </View>,
);
setTimeout(() => {
  for (const [name, box] of Object.entries(seen)) console.log(name, "→", box);
}, 300);

В предпросмотре три полосы из четырёх сработали: "50px", "2rem" и "calc(100% - 32px)" react-native-web отдал в CSS как есть, и браузер их понял — 50, 32 и 268. Четвёртая — наоборот: строку "50" без единицы CSS не принимает, браузер выбросил объявление, и полоса растянулась колонкой на все 300.

На телефоне всё переворачивается. Строку ширины разбирает C++-часть рендерера — fromRawValue в react-native/ReactCommon/react/renderer/components/view/conversions.h. Она сверяет строку с "auto" и ещё тремя ключевыми словами, а остальное разбирает как CSS, но принимает только два вида значений: голое число (CSSNumber) и процент (CSSPercentage). "50" — голое число, то есть 50 dp. "50px", "2rem" и calc — ни то, ни другое: ширина становится неопределённой, будто её не задавали, и колонка растягивает полосу на 300. Ни ошибки, ни предупреждения.

Остаются диагностики, по одной на каждую полосу: «Тип ""50px"" не может быть назначен для типа "DimensionValue | undefined"». Это тот случай, ради которого написана глава: рантайм молчит на обеих платформах, причём по-разному, и неверную строку ловит только компилятор с настоящими типами.

Проценты и flex отвечают на вопрос «какая доля родителя». Но есть решения, которые зависят от экрана целиком: сколько колонок у справочника, показывать ли боковую панель. В вебе для этого медиазапросы, и пересчитывает их сам браузер — при повороте, при смене размера окна. В React Native медиазапросов нет: стиль — объект, пересчитывать его некому. Размер окна приходит числом — из Dimensions.get("window") или из хука useWindowDimensions, — а решение принимает ваш код.

Справочник «Подхода»: на узком окне одна колонка карточек, от 600 dp — две. Рядом баннер, чья ширина посчитана прямо в StyleSheet.create, — так пишут часто, пока не повернут телефон. Поворот изобразит setDevice. Эффект — как в части IV: срабатывает после рендера, в котором сменилась ширина. Прогноз: что он напечатает до поворота и после?

declare function setDevice(device: { width?: number; height?: number; scale?: number }): void;
const { View, StyleSheet, Dimensions, useWindowDimensions } = ReactNative;

setDevice({ width: 393, height: 852, scale: 3 });

const styles = StyleSheet.create({
  // баннер тренировки: ширина окна минус поля по 16
  banner: { width: Dimensions.get("window").width - 32, height: 40, backgroundColor: "#c7d2fe" },
});

function Catalog() {
  const { width } = useWindowDimensions();
  // справочник: на узком окне одна колонка карточек, на широком — две
  const columns = width >= 600 ? 2 : 1;
  const card = (width - 32 - 12 * (columns - 1)) / columns;
  React.useEffect(() => {
    console.log(`окно ${width}: колонок ${columns}, карточка ${card}, баннер ${styles.banner.width}`);
  }, [width]);
  return <View style={styles.banner} />;
}

mount(<Catalog />);
// поворот телефона: окно становится шире, чем выше
setTimeout(() => setDevice({ width: 852, height: 393 }), 100);

До поворота всё сходится: 393 − 32 = 361, и у карточки, и у баннера. После поворота хук вернул 852, компонент перерисовался, колонок стало две, карточка — (852 − 32 − 12) / 2 = 404. А баннер остался 361: его ширину вычислили один раз, когда выполнялся модуль, и в объекте стиля лежит просто число, без всякой подписки. Об этом предупреждает комментарий над Dimensions.get в исходнике React Native: размеры могут измениться, например при повороте, поэтому их не кешируют, а читают на каждом рендере — инлайн-стилем, а не в StyleSheet.

Но читать на каждом рендере мало — рендер ещё нужно вызвать. Это и делает useWindowDimensions. Вот он целиком, без типов:

// react-native/Libraries/Utilities/useWindowDimensions.js (0.86), без типов
export default function useWindowDimensions() {
  const [dimensions, setDimensions] = useState(() => Dimensions.get("window"));
  useEffect(() => {
    function handleChange({ window }) {
      if (
        dimensions.width !== window.width ||
        dimensions.height !== window.height ||
        dimensions.scale !== window.scale ||
        dimensions.fontScale !== window.fontScale
      ) {
        setDimensions(window);
      }
    }
    const subscription = Dimensions.addEventListener("change", handleChange);
    // событие могло проскочить между рендером и подпиской — сверяемся сразу
    handleChange({ window: Dimensions.get("window") });
    return () => {
      subscription.remove();
    };
  }, [dimensions]);
  return dimensions;
}

Для прошедшего часть IV здесь нет ничего нового: состояние, эффект с подпиской и уборкой. Новое только источник — событие change у Dimensions. На телефоне его рождает нативная сторона сигналом didUpdateDimensions. На iOS, судя по RCTDeviceInfo.mm, сигнал уходит при повороте, при смене рамки окна — например, когда iPad делит экран с другим приложением, — и при смене размера текста в настройках. В предпросмотре react-native-web слушает resize у visualViewport — ровно этот сигнал и шлёт setDevice. Версия react-native-web проще: четыре поля она не сравнивает и кладёт новый объект при каждом событии.

Dimensions знает два размера. "window" — область приложения: на планшете, поделённом с другим приложением, она меньше экрана. "screen" — дисплей целиком. Раскладку строят по окну, поэтому хук отдаёт только его.

Четвёртое поле хука — fontScale: множитель размера текста из системных настроек, «Размер текста» на iOS и «Размер шрифта» на Android — так сказано в комментарии к PixelRatio.getFontScale. При множителе 1,3 текст с fontSize: 16 на телефоне вырастет до 16 × 1,3 = 20,8 dp: масштабирование включено, пока у Text не выключен allowFontScaling (по умолчанию true), а потолок ставит maxFontSizeMultiplier. В предпросмотре этого не увидеть: react-native-web пишет fontScale: 1 жёстко, а allowFontScaling и maxFontSizeMultiplier в разметку не передаёт вовсе.

Отсюда практическое правило: строке с текстом задают minHeight, а не height. Строка справочника высотой 44 при крупном системном шрифте обрежет название — высота в dp осталась прежней, а текст вырос. В предпросмотре такую строку не проверить: там fontScale всегда 1.

Осталась константа, обещанная ещё в статье про StyleSheet: StyleSheet.hairlineWidth — толщина самой тонкой линии платформы, для разделителей и рамок. В предпросмотре она всегда 1. На телефоне — нет, и вот как её считают обе реализации:

// react-native/Libraries/StyleSheet/StyleSheetExports.js (0.86), сокращено
get hairlineWidth(): number {
  if (_hairlineWidth == null) {
    const PixelRatio = require("../Utilities/PixelRatio").default;
    _hairlineWidth = PixelRatio.roundToNearestPixel(0.4);
    if (_hairlineWidth === 0) {
      _hairlineWidth = 1 / PixelRatio.get();
    }
  }
  return _hairlineWidth;
},

// react-native/Libraries/Utilities/PixelRatio.js (0.86)
static roundToNearestPixel(layoutSize: number): number {
  const ratio = PixelRatio.get();
  return Math.round(layoutSize * ratio) / ratio;
}

// react-native-web/dist/exports/StyleSheet/index.js (0.21.2)
// `hairlineWidth` is not implemented using screen density as browsers may
// round sub-pixel values down to `0`, causing the line not to be rendered.
StyleSheet.hairlineWidth = 1;

Рецепт телефона: взять 0,4 dp и округлить до целого числа физических пикселей — это и есть roundToNearestPixel. Если вышел ноль, берётся ровно один физический пиксель: 1 / PixelRatio.get(). Перепишем рецепт своей функцией densityFor(scale) — «PixelRatio телефона с такой-то плотностью» — и спросим у неё линию на шести экранах, а последней строкой сравним с настоящим StyleSheet в предпросмотре, изображающем плотность 3. Прогноз: сколько dp и сколько физических пикселей будет у линии на каждом экране и что скажет предпросмотр?

declare function setDevice(device: { width?: number; height?: number; scale?: number }): void;
const { PixelRatio, StyleSheet } = ReactNative;

// PixelRatio телефона с заданной плотностью: те же формулы, что в PixelRatio.js
// и StyleSheetExports.js из react-native 0.86
function densityFor(scale: number) {
  const roundToNearestPixel = (dp: number) => Math.round(dp * scale) / scale;
  const thin = roundToNearestPixel(0.4);
  return {
    get: () => scale,
    getPixelSizeForLayoutSize: (dp: number) => Math.round(dp * scale),
    roundToNearestPixel,
    // ноль значит «тоньше половины пикселя» — тогда линия в один физический пиксель
    hairlineWidth: thin === 0 ? 1 / scale : thin,
  };
}

for (const scale of [1, 1.5, 2, 2.625, 3, 4]) {
  const d = densityFor(scale);
  console.log(`${scale}x: ${d.hairlineWidth} dp = ${d.getPixelSizeForLayoutSize(d.hairlineWidth)} px`);
}

setDevice({ scale: 3 });
console.log("предпросмотр, плотность", PixelRatio.get(), "→ hairlineWidth", StyleSheet.hairlineWidth);

На пяти экранах из шести линия — ровно один физический пиксель, а в dp — дробь: 1, 0,67, 0,5, 0,38, 0,33. На плотности 1 округление дало ноль, и сработал запасной путь: 1 / 1 = 1. Исключение — плотность 4: 0,4 × 4 = 1,6 округляется до двух пикселей, и линия выходит 0,5 dp — толще, чем на экране плотности 3. Рецепт ищет не «один пиксель», а «около 0,4 dp, но целыми пикселями». А предпросмотр при плотности 3 ответил 1: PixelRatio react-native-web плотность знает, но hairlineWidth по ней не считает.

Причина — в комментарии над константой: браузеры могут округлить долю пикселя до нуля, и линия не нарисуется. Chrome 152, на котором проверялась статья, линию не теряет, но и тоньше не рисует: рамку 0.1px он округляет вверх до целого CSS-пикселя — при плотности 1, 2 и 3 вычисленная толщина одна и та же, 1px. Выходит, дробная константа в этом браузере ничего бы не дала, а в другом, по словам комментария, могла бы стереть линию, — и react-native-web не рискует. Цена видна глазами: разделитель толщиной hairlineWidth в предпросмотре — CSS-пиксель, то есть на экране плотности 3 три физических пикселя, втрое толще, чем на телефоне. Насколько лёгкие у списка разделители, по предпросмотру не судят.

Ещё две детали из того же исходника. Значение считается один раз, при первом обращении, и запоминается в _hairlineWidth. А комментарий над геттером прямо просит не считать его постоянным: на разных платформах и плотностях оно разное. Поэтому в стилях пишут StyleSheet.hairlineWidth, а не 0.5 или 1 / 3. Сама densityFor с этого места лежит в подложке рядом с setDevice и едет в следующие статьи: где предпросмотр отвечает за браузер, она ответит за телефон.

roundToNearestPixel из того же рецепта пригодится и самому — когда размер считает ваш код: 8,4 dp на плотности 3 превращаются в 8,33, ровно 25 физических пикселей. Этот пример взят из комментария к PixelRatio в исходнике React Native.