Flex с другими умолчаниями

В вебе раскладка начинается с выбора: блок, строка, flex, grid. В React Native выбирать не из чего: у каждого View раскладка flex, и другой нет. В типах у display три значения — "flex", "none" и "contents"; блоков, строк и сеток нет вовсе. Писать display: "flex" не нужно — он уже стоит.

Но этот flex — колонка. Главная ось, вдоль которой идут дети и работает justifyContent, у View по умолчанию вертикальна, а поперечная, где работает alignItems, — горизонтальна. У display: flex в CSS наоборот: ряд — с этого начинается статья пролога «Flex: делим свободное место своими руками». Перенесём привычку буквально. Шапка тренировки: слева место под название, справа кнопка, а по вебу это justifyContent: "space-between" и alignItems: "center". Положение спросим у самого React Native: событие onLayout, знакомое по numberOfLines из прошлой статьи, приносит x, y, ширину и высоту вида относительно родителя. Прогноз: где окажутся название и кнопка в шапке «как в вебе» и где — с flexDirection: "row"?

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

const seen: Record<string, string> = {};
function track(name: string) {
  // ключ заводится при отрисовке: печатаем в порядке экрана, а не событий
  seen[name] = "";
  return (e: LayoutChangeEvent) => {
    const { x, y } = e.nativeEvent.layout;
    seen[name] = `x ${x}, y ${y}`;
  };
}

interface HeaderProps {
  name: string;
  extra?: ViewStyle;
}

// шапка тренировки по привычке из веба: название слева, кнопка справа, обе по центру высоты
function Header({ name, extra }: HeaderProps) {
  return (
    <View style={[{ width: 300, justifyContent: "space-between", alignItems: "center" }, extra]}>
      <View onLayout={track(name + ", название")} style={{ width: 120, height: 20, backgroundColor: "#e6e1d6" }} />
      <View onLayout={track(name + ", кнопка")} style={{ width: 80, height: 32, backgroundColor: "#c7d2fe" }} />
    </View>
  );
}

mount(
  <View style={{ gap: 12 }}>
    <Header name="как в вебе" />
    <Header name="flexDirection: row" extra={{ flexDirection: "row" }} />
  </View>,
);
setTimeout(() => {
  for (const [name, box] of Object.entries(seen)) console.log(name, "→", box);
}, 300);

Шапка «как в вебе» встала столбиком посередине. Оба правила сработали, только не по тем осям. alignItems: "center" центрирует по поперечной оси, а в колонке она горизонтальна: название сдвинулось на (300 − 120) / 2 = 90, кнопка — на 110. justifyContent: "space-between" раздаёт свободное место вдоль главной оси, то есть по вертикали, а высота шапки не задана и равна содержимому: раздавать нечего, и кнопка встала сразу под названием, на y 20. Одна строка flexDirection: "row" возвращает задуманное: название у левого края, кнопка у правого, и по высоте обе по центру — название опустилось на (32 − 20) / 2 = 6.

Для телефона колонка — удобное умолчание: большинство экранов — стопка сверху вниз. Поэтому ряд в React Native пишут явно, а колонку не пишут никогда. У той же пары есть следствие, которое встречается на каждом первом экране. alignItems по умолчанию stretch, как и в CSS, но растягивает он по поперечной оси, а в колонке это ширина. Любой View без заданной ширины в колонке берёт ширину родителя: полоса, карточка, кнопка. Кнопка «Сохранить» во весь экран — не ошибка стиля, а колонка со stretch; как её поправить, разберёт задача номер три.

В исходнике Yoga умолчания записаны прямо в полях класса Style — react-native/ReactCommon/yoga/yoga/style/Style.h: flexDirection_ = FlexDirection::Column, alignContent_ = Align::FlexStart, boxSizing_ = BoxSizing::BorderBox, а выше DefaultFlexShrink = 0.0f. Там же лежит и WebDefaultFlexShrink = 1.0f — для настройки useWebDefaults, которую React Native не включает.

Второе расхождение — в том, что делает ряд, когда детям тесно. В CSS у flex-элемента flex-shrink: 1: если сумма ширин больше контейнера, каждый уступает пропорционально своей ширине. В React Native flexShrink по умолчанию 0: никто не уступает, и лишнее вылезает за край. Прогноз: какой ширины будут чипы «грудь» и «спина» в ряду 200 — без стилей и с flexShrink: 1?

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

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

interface RowProps {
  name: string;
  chip?: ViewStyle;
}

// ряд шириной 200, в нём два чипа по 120: вместе они на 40 шире ряда
function Row({ name, chip }: RowProps) {
  return (
    <View style={{ flexDirection: "row", width: 200, height: 40, marginBottom: 8, backgroundColor: "#d6d3cc" }}>
      <View onLayout={track(name + ", грудь")} style={[{ width: 120, height: 30, backgroundColor: "#c7d2fe" }, chip]} />
      <View onLayout={track(name + ", спина")} style={[{ width: 120, height: 30, backgroundColor: "#fca5a5" }, chip]} />
    </View>
  );
}

mount(
  <View>
    <Row name="умолчание" />
    <Row name="flexShrink: 1" chip={{ flexShrink: 1 }} />
  </View>,
);
setTimeout(() => {
  for (const [name, box] of Object.entries(seen)) console.log(name, "→", box);
}, 300);

Без flexShrink чипы остались по 120, и второй вылез за край ряда на 40 — на экране примера розовый чип выходит за серую полосу ряда. С flexShrink: 1 они уступили поровну: 40 переполнения делятся пропорционально ширинам, ширины равны — по 20 с каждого, итого по 100. В CSS так вышло бы без всякого стиля.

Умолчание 0 означает простую вещь: заданный размер — обещание. Вид шириной 120 будет шириной 120, сколько бы соседей ни пришло. Цена — переполнение, которое видно не в коде, а только на экране, и чаще всего оно случается не с чипами, а с текстом. Строка справочника: значок и длинное название в ряду. Проверим её так же и заодно спросим у предпросмотра вычисленный flex-shrink текста и значка — через computed из подложки. Прогноз: какой ширины будет название в каждой строке?

// computed — хелпер подложки: самому примеру document недоступен
declare function computed(testID: string, keys: string[]): string;
type LayoutChangeEvent = import("react-native").LayoutChangeEvent;
type TextStyle = import("react-native").TextStyle;
const { View, Text } = ReactNative;

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

interface SetRowProps {
  name: string;
  title?: TextStyle;
}

// строка справочника: значок 40 и длинное название в ряду шириной 200
function SetRow({ name, title }: SetRowProps) {
  return (
    <View style={{ flexDirection: "row", width: 200, marginBottom: 8 }}>
      <View testID={name + ", значок"} style={{ width: 40, height: 20, backgroundColor: "#e6e1d6" }} />
      <Text testID={name} onLayout={track(name)} style={title}>
        Жим штанги лёжа на наклонной скамье узким хватом
      </Text>
    </View>
  );
}

mount(
  <View>
    <SetRow name="без flexShrink" />
    <SetRow name="flexShrink: 1" title={{ flexShrink: 1 }} />
  </View>,
);
setTimeout(() => {
  for (const [name, box] of Object.entries(seen)) console.log(name, "→", box);
  console.log("flex-shrink у Text:", computed("без flexShrink", ["flexShrink"]));
  console.log("flex-shrink у View:", computed("без flexShrink, значок", ["flexShrink"]));
}, 300);

Обе строки дали 160: название уступило значку ровно 40 — и с flexShrink, и без. Для предпросмотра это верно, для телефона — нет, и последние две строки объясняют почему. Умолчания Yoga react-native-web ставит классом только на View: его css-view-… из статьи про StyleSheet несёт flex-direction: column, flex-shrink: 0, align-content: flex-start и box-sizing: border-box. У Text свой класс, и flex-shrink в нём не задан, поэтому в ряду браузер сжимает текст по правилу CSS — с единицей.

На телефоне у текста тот же flexShrink 0, что у любого узла Yoga, а мерить его Yoga будет по ширине всего ряда: в computeFlexBasisForChild ребёнок без своей ширины получает режим FitContent с шириной родителя, то есть 200. Название займёт почти всю эту ширину — сколько выйдет у самой длинной строки при переносе в 200, — и вместе со значком вылезет за край почти на 40. Первая строка вывода на телефоне показала бы не 160, а число около 200; вторая — те же 160: с flexShrink: 1 текст уступит ровно столько, сколько не хватает. Это та самая ловушка из заметки в конце прошлой статьи: там название рядом с иконкой сжалось до 176 из 200, здесь — до 160, и оба раза сжимал CSS, а не Yoga. В предпросмотре её не увидеть, поэтому правило стоит выучить заранее: текст в ряду всегда получает flexShrink: 1.

Если текст в ряду обёрнут во View — название с подписью в столбик, например, — flexShrink: 1 нужен обёртке: в ряду стоит она, а не текст. Такой случай предпросмотр покажет честно, у View класс с flex-shrink: 0. Это задача номер один.

Третье умолчание спит, пока ряд не переносится. alignContent решает, как строки переноса делят свободное место поперёк: работает он только при flexWrap: "wrap" и только когда у контейнера есть лишняя высота. В CSS начальное значение align-content — normal, и у flex-контейнера оно ведёт себя как stretch: строки растягиваются и делят остаток поровну. В React Native умолчание — flex-start: строки прижаты к началу, весь остаток уходит вниз.

Фильтр справочника «Подхода» — чипы мышечных групп в панели заданной высоты. Чип 90 × 30 с полем 5, в строку входит два. Прогноз: на каком y окажется вторая строка чипов при умолчании и с alignContent: "stretch"?

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

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

interface PanelProps {
  name: string;
  extra?: ViewStyle;
}

// фильтр справочника: четыре чипа по 90 с полем 5 в панели 200 × 120 — по два в строке
function Panel({ name, extra }: PanelProps) {
  return (
    <View style={[{ flexDirection: "row", flexWrap: "wrap", width: 200, height: 120, backgroundColor: "#f4f1ea" }, extra]}>
      {["грудь", "спина", "ноги", "плечи"].map((group) => (
        <View key={group} onLayout={track(name + ", " + group)} style={{ width: 90, height: 30, margin: 5, backgroundColor: "#c7d2fe" }} />
      ))}
    </View>
  );
}

mount(
  <View style={{ gap: 8 }}>
    <Panel name="умолчание" />
    <Panel name="alignContent: stretch" extra={{ alignContent: "stretch" }} />
  </View>,
);
setTimeout(() => {
  for (const [name, box] of Object.entries(seen)) console.log(name, "→", box);
}, 300);

При умолчании вторая строка стоит на y 45: первая строка — чип 30 и поля по 5, всего 40, и вторая начинается сразу за ней. Внизу панели остаются пустые 40. Со stretch эти 40 поделены между строками поровну: каждая стала 60, и вторая строка чипов сдвинулась на 65. Сами чипы не выросли — у них задана высота; растянулись строки, в которых они стоят. Не будь высота задана, чипы растянул бы ещё и alignItems: "stretch" — до высоты своей строки.

Это расхождение предпросмотр показывает честно: align-content: flex-start стоит в том же классе View. А на практике оно самое тихое из четырёх: перенос в контейнере заданной высоты встречается редко, а без лишней высоты flex-start и stretch дают одно и то же. Вспомнить о нём стоит, когда строки переноса не хотят расходиться по высоте панели. Двигает их alignContent — center, space-between и остальные значения из типа, — а не justifyContent: тот работает внутри строки.

Четвёртое расхождение — в том, что считать шириной. В CSS по умолчанию box-sizing: content-box: width задаёт ширину содержимого, а отступы и рамка прибавляются снаружи. В React Native — border-box: width задаёт внешнюю ширину вида, а отступы и рамка вычитаются изнутри. Прогноз: какие размеры сообщит onLayout у карточки 200 × 60 с отступом 12 и рамкой 2 и у её содержимого — при умолчании и с boxSizing: "content-box"?

type LayoutChangeEvent = import("react-native").LayoutChangeEvent;
type ViewStyle = import("react-native").ViewStyle;
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;
  };
}

interface CardProps {
  name: string;
  extra?: ViewStyle;
}

// карточка тренировки: размер 200 × 60, отступ 12, рамка 2
function Card({ name, extra }: CardProps) {
  return (
    <View onLayout={track(name)} style={[{ width: 200, height: 60, padding: 12, borderWidth: 2, borderColor: "#2563eb" }, extra]}>
      <View onLayout={track(name + ", содержимое")} style={{ flexGrow: 1, backgroundColor: "#e6e1d6" }} />
    </View>
  );
}

mount(
  <View style={{ gap: 8, alignItems: "flex-start" }}>
    <Card name="умолчание" />
    <Card name="boxSizing: content-box" extra={{ boxSizing: "content-box" }} />
  </View>,
);
setTimeout(() => {
  for (const [name, box] of Object.entries(seen)) console.log(name, "→", box);
}, 300);

При умолчании карточка ровно 200 × 60, как написано, а содержимому досталось 200 − 2 × 12 − 2 × 2 = 172 в ширину и 60 − 28 = 32 в высоту. С content-box наоборот: 200 × 60 получило содержимое, а карточка выросла на те же 28 — до 228 × 88. Так посчитал бы браузер для обычного div без сброса стилей.

Многие веб-разработчики этого расхождения не почувствуют: в вебе border-box давно принято включать сбросом * { box-sizing: border-box } — такая строка стоит даже в стилях страницы этой песочницы, а откуда она взялась, разобрано в прологе, в разделе «Коробка в четыре слоя». В React Native сброс не нужен: border-box — умолчание Yoga, а в предпросмотре его повторяет тот же класс View. Обратный путь в типах React Native 0.86 тоже есть — свойство boxSizing со значением "content-box". Yoga учитывает его и при подсчёте основы flex: Node::resolveFlexBasis прибавляет отступы и рамку, только когда стоит не border-box.

В предпросмотре boxSizing уходит в CSS как есть: react-native-web его не проверяет и не переводит. Поэтому content-box здесь считается так же, как на телефоне, и 228 × 88 из вывода — честная цифра для обоих.

Все четыре расхождения — умолчания, а не другие правила. Значит, поведение CSS возвращается обычным стилем: четыре ключа, поставленные в массиве style первыми. Всё, что задаст сам компонент, стоит правее и перекрывает их — правило «слева направо» из статьи про StyleSheet. Соберём такую обёртку — Div, «div с display: flex» — и прогоним одну вёрстку через View и через Div: карточку 200 с отступом 10 и рамкой 2, а в ней два чипа по 120. Как обёртка передаёт пропсы дальше — как в части IV; новое здесь только содержимое CSS_FLEX. Прогноз: размеры карточки и положение чипов в обоих случаях?

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

// четыре умолчания CSS, которых нет у React Native
const CSS_FLEX: ViewStyle = {
  flexDirection: "row",
  flexShrink: 1,
  alignContent: "stretch",
  boxSizing: "content-box",
};

// div с display: flex — это View, которому вернули умолчания CSS
function Div({ style, ...rest }: ViewProps) {
  return <View {...rest} style={[CSS_FLEX, style]} />;
}

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

interface CardProps {
  name: string;
  Box: React.ComponentType<ViewProps>;
}

// одна и та же вёрстка: карточка 200 с отступом и рамкой, в ней два чипа по 120
function Card({ name, Box }: CardProps) {
  return (
    <Box onLayout={track(name)} style={{ width: 200, padding: 10, borderWidth: 2, marginBottom: 8 }}>
      <Box onLayout={track(name + ", чип 1")} style={{ width: 120, height: 30, backgroundColor: "#c7d2fe" }} />
      <Box onLayout={track(name + ", чип 2")} style={{ width: 120, height: 30, backgroundColor: "#fca5a5" }} />
    </Box>
  );
}

mount(
  <View style={{ alignItems: "flex-start" }}>
    <Card name="View" Box={View} />
    <Card name="Div" Box={Div} />
  </View>,
);
setTimeout(() => {
  for (const [name, box] of Object.entries(seen)) console.log(name, "→", box);
}, 300);

Одна вёрстка — две раскладки, и в разнице видны три ключа из четырёх. View сложил чипы в колонку, по 120 каждый; карточка шириной 200, а высотой 2 + 10 + 30 + 30 + 10 + 2 = 84. Div поставил чипы в ряд, и им стало тесно: внутри карточки 200, а чипам нужно 240, — flexShrink: 1 ужал каждого до 100. Сама карточка при content-box выросла до 224 × 54. Четвёртый ключ, alignContent, молчит: переноса нет. Во второй задаче он заговорит — с этого места CSS_FLEX и Div лежат в подложке.

Пригодится Div в одном случае: когда кусок вёрстки переносится с веба и его цифры уже выверены под CSS. Писать им весь экран не стоит — вёрстка React Native, которую прочитает другой разработчик, должна полагаться на умолчания React Native. А на всё остальное — таблица.

Пятое отличие — не умолчание, а запись: flex в React Native — одно число, а не сокращение из трёх. Yoga читает flex: 1 как flexGrow 1 и основу 0, а flexShrink оставляет нулём; отрицательное число, наоборот, уходит в flexShrink. react-native-web отдаёт flex: 1 браузеру как есть, и вычисленный стиль в предпросмотре — «1 1 0%». Разницы почти не видно: и Yoga, и CSS умножают flexShrink на основу, а при основе 0 сжимать нечего.