Каскада нет, наследования нет — кроме одного случая

В части II итоговый стиль элемента собирал браузер — статья «getComputedStyle: какой стиль на самом деле» доставала его одним вызовом: правила по селекторам, наследование от родителя, значения по умолчанию. Из этого выросла привычка: шрифт и цвет задают один раз, на body или на карточке, а текст внутри их подхватит. color, font-size, font-family и line-height в CSS наследуются сами, об этом даже не думают.

Перенесём привычку в «Подход» буквально: карточка упражнения получает красный цвет и крупный шрифт, внутри — название и строка с подходами, где вес выделен вложенным Text. Вычисленные значения спросим у предпросмотра через computed — хелпер подложки, родственник peek из прошлой статьи: самому примеру document недоступен. Прогноз: какими будут цвет и размер у каждого из четырёх узлов?

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

// привычка из CSS: шрифт и цвет — один раз, на контейнере карточки
mount(
  <View testID="card" style={{ color: "#c33", fontSize: 24 }}>
    <Text testID="title">Жим лёжа</Text>
    <Text testID="note" style={{ color: "#8a8594" }}>
      3 подхода, <Text testID="weight" style={{ fontWeight: "700" }}>60 кг</Text>
    </Text>
  </View>,
);

setTimeout(() => {
  for (const id of ["card", "title", "note", "weight"]) {
    console.log(id, computed(id, ["color", "fontSize", "fontWeight"]));
  }
}, 100);

Сама карточка цвет и размер получила, но рисовать ими ей нечего: символов у неё нет. Название вышло чёрным и четырнадцатого размера, как будто стиля контейнера не было вовсе. Строка с подходами серая — это её собственный стиль. А «60 кг» взяло серый цвет и размер 14 у строки, в которую вложено, и жирность у себя. Итог: от View к Text не дошло ничего, от Text к вложенному Text — всё текстовое.

Компилятор предупредил заранее. На color в стиле карточки он пишет «Ни одна перегрузка не соответствует этому вызову», а внутри, у каждой из двух перегрузок, — «Объектный литерал может использовать только известные свойства. "color" не существует в типе "ViewStyle | RecursiveArray<Falsy | ViewStyle>"». Про fontSize он промолчал лишь потому, что на литерал выдаёт одну такую ошибку — первую. В типе ViewStyle нет ни цвета текста, ни шрифта, и не по забывчивости: контейнеру некуда их деть. На телефоне рендерер и не передаст их нативному виду — неизвестные виду ключи он пропускает, как в прошлой статье пропустил magrinRight.

Как предпросмотр добивается того же в браузере, где CSS наследует всё подряд? Силой. Корневому Text react-native-web ставит явные color: black и font: 14px System, и наследование от div карточки обрывается. Вложенный Text он рисует уже не div, а span со стилем color: inherit; font: inherit, и тот честно наследует от внешнего. Иначе говоря, в вебе поведение телефона изображено: сброс на корне, inherit внутри. Запомните слово «изображено» — в четвёртом разделе изображение даст трещины.

Чёрный и 14 — не выдумка react-native-web. Те же два числа стоят в TextAttributes::defaultTextAttributes() у самого React Native: foregroundColor = blackColor(), fontSize = 14.0.

Чтобы понять, откуда правило и откуда исключение, посмотрим, во что дерево превращается на телефоне. Каскад и наследование в браузере делает движок стилей: он проходит по дереву и для каждого узла вычисляет все свойства. В React Native такого движка нет. Каждый View становится нативным видом и получает ровно те свойства, что лежат в его собственном style после слияния, — ни одного от родителя. Оговорка про View, который только раскладывает детей и сам ничего не рисует: рендерер вправе убрать его из нативного дерева (об этом пропс collapsable), но и тогда детям от него ничего не достаётся. Спрашивать у предка шрифт виду незачем: шрифта у вида нет.

С текстом иначе. Корневой Text — нативный текстовый вид, абзац. Рисует он одну строку с атрибутами — на iOS это NSAttributedString, на Android Spannable: символы, разбитые на куски, и у каждого куска свои цвет, шрифт, жирность. А вложенный Text вида не создаёт вовсе — он становится куском строки своего абзаца. В исходнике React Native это видно в двух местах:

// react-native/Libraries/Text/Text.js (0.86), сокращено
const hasTextAncestor = useContext(TextAncestorContext);
if (hasTextAncestor) {
  return <NativeVirtualText {...processedProps} ref={forwardedRef} />;
}
// …ниже — корневой Text: настоящий нативный вид
return <TextAncestorContext value={true}>{nativeText}</TextAncestorContext>;

// react-native/Libraries/Components/View/View.js (0.86), сокращено
const hasTextAncestor = use(TextAncestorContext);
if (hasTextAncestor) {
  return <TextAncestorContext value={false}>{actualView}</TextAncestorContext>;
}
return actualView;

Корневой Text кладёт в контекст true — «вы внутри текста». Вложенный читает его и вместо текстового вида отдаёт NativeVirtualText; у его нативной части и имя говорящее — RCTVirtualText, «виртуальный текст». А View, оказавшись внутри текста, кладёт в контекст false: текст под ним снова корневой, со своим абзацем. Контекст здесь тот же механизм, что в части IV, — просто им пользуется сам React Native.

Сама склейка происходит в C++-части рендерера, и она короче любого описания каскада. ParagraphShadowNode — узел корневого текста — начинает с TextAttributes::defaultTextAttributes(), то есть с чёрного и 14, и накладывает на них свои атрибуты. Дальше BaseTextShadowNode::buildAttributedString идёт по детям. Голая строка становится куском с текущими атрибутами. Для вложенного текста атрибуты копируются, и на копию накладываются его собственные — методом apply. Правило наложения одно на каждое поле: fontSize = !std::isnan(textAttributes.fontSize) ? textAttributes.fontSize : fontSize. Задал ребёнок размер — берётся его, не задал — остаётся родительский. Любой другой узел внутри текста, тот же View, становится в строке вложением — местом под отдельный вид.

Вот и весь ответ на вопрос из заголовка. «Наследование» в React Native — свойство не дерева, а одной строки: вложенный текст наследует, потому что он и есть кусок родительской строки. Шрифт с View не наследуется, потому что у View и Text нет общей строки — это два разных вида. И правило «строка только внутри Text» из первой главы — оттуда же: у символов вне текста нет абзаца, куда их вписать.

Раз вложенный Text — не вид, у него нет и раскладки: его узел TextShadowNode унаследован от простого ShadowNode, а у абзаца ParagraphShadowNode основа — узел вида. Отступы, рамки и размеры задают абзацу, а куску строки — только то, что меняет символы.

Теперь перепишем правило своими руками. Резолвер пройдёт по дереву JSX — не отрисованному, а тому самому объекту, который возвращает разметка, — и для каждой строки скажет, с какими атрибутами её нарисуют. Из рендерера нужны три детали: список текстовых ключей, которые переходят к вложенному тексту, умолчания корневого абзаца и правило наложения. Наложение у нас уже есть: это flatten из прошлой статьи, он лежит в подложке, и поздний ключ в нём перекрывает ранний ровно как в apply.

Прогноз: сколько строк напечатает резолвер, какой размер получит «Жим лёжа» и что достанется тексту из своего компонента Weight?

type Style = import("react-native").TextStyle;
type Falsy = undefined | null | false | "";
type StyleArg = Style | Falsy | readonly StyleArg[];
declare function flatten(style: StyleArg): Style;
type Fragment = { text: string; style: Style | null };
interface NodeProps {
  style?: StyleArg;
  children?: React.ReactNode;
}
const { View, Text } = ReactNative;

// что вложенный Text берёт у родителя; у React Native таких атрибутов
// больше двадцати, здесь — те, что нужны «Подходу»
const TEXT_KEYS = ["color", "fontFamily", "fontSize", "fontStyle", "fontWeight",
  "letterSpacing", "lineHeight", "textDecorationLine", "textTransform"] as const;
// с этого начинает любой корневой Text — ни от какого View он ничего не берёт
const TEXT_DEFAULTS: Style = { color: "black", fontSize: 14 };

function pickText(style: Style): Style {
  const out: Record<string, unknown> = {};
  for (const key of TEXT_KEYS) if (style[key] !== undefined) out[key] = style[key];
  return out as Style;
}

function resolve(node: React.ReactNode, inherited: Style | null, out: Fragment[] = []): Fragment[] {
  if (typeof node === "string" || typeof node === "number") {
    // null: абзаца, куда вписать эти символы, нет
    out.push({ text: String(node), style: inherited });
  } else if (Array.isArray(node)) {
    for (const child of node) resolve(child, inherited, out);
  } else if (React.isValidElement<NodeProps>(node)) {
    const { style, children } = node.props;
    if (node.type === Text) {
      resolve(children, pickText(flatten([inherited ?? TEXT_DEFAULTS, style])), out);
    } else if (node.type === View) {
      // стиль вида не читается вовсе, а цепочка рвётся
      resolve(children, null, out);
    } else if (typeof node.type === "function") {
      // свой компонент — не вид платформы: разворачиваем его и идём дальше
      resolve((node.type as (props: NodeProps) => React.ReactNode)(node.props), inherited, out);
    }
  }
  return out;
}

const kg = 60;
const Weight = () => <Text style={{ fontWeight: "700" }}>{kg} кг</Text>;
const card = (
  <View style={{ padding: 16, backgroundColor: "#f4f1ea" }}>
    <Text style={{ fontSize: 20 }}>Жим лёжа</Text>
    <Text style={{ color: "#8a8594" }}>3 подхода, <Weight /></Text>
  </View>
);
for (const f of resolve(card, null)) console.log(JSON.stringify(f.text), "→", f.style);

Кусков четыре. «Жим лёжа» — корневой абзац: умолчания плюс свой размер 20. «3 подхода, » — другой абзац, со своим серым. «60» и « кг» — два куска, потому что число и строка в JSX — разные дети, но атрибуты у них одни: серый и 14 от абзаца, жирность от себя. Фон и отступ карточки резолвер не прочитал вовсе — ветка для View на стиль не смотрит и отдаёт детям null.

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

Ветка, где строка получает null, — то же правило, что «Unexpected text node» из статьи «Ни div, ни класса, ни каскада»: строке вне текста негде жить. В резолвере это не ошибка, а пометка; она появится в задачах. Сама миниатюра — TEXT_KEYS, TEXT_DEFAULTS, pickText и resolve — с этого места лежит в подложке и едет в следующие статьи.

У настоящего рендерера список длиннее нашего: TextAttributes::apply перебирает цвета, шрифт, межбуквенное расстояние, высоту строки, выравнивание, украшения и тени — больше двух десятков полей. Принцип у всех один: задано у ребёнка — берётся его.

В первом разделе react-native-web изобразил поведение телефона: сброс на корневом тексте, inherit на вложенном. Но изображение сделано средствами CSS, а CSS наследует больше, чем сбрасывает react-native-web. Сброс касается цвета, шрифта целиком, выравнивания, переносов и подчёркивания. А letterSpacing и textTransform в CSS тоже наследуются — и их никто не сбрасывает. Вторая трещина — View внутри текста. На телефоне он рвёт цепочку, а react-native-web контекст «внутри текста» у View не сбрасывает, и текст под ним остаётся span с inherit.

Сверим модель с предпросмотром на одном экране. Шапка группы мышц сделана «как в CSS»: разрядку и капс получил контейнер. Прогноз: что скажет резолвер про «грудь» и «новое» — и что покажет предпросмотр?

type Style = import("react-native").TextStyle;
declare function resolve(node: React.ReactNode, inherited: Style | null): { text: string; style: Style | null }[];
declare function computed(testID: string, keys: string[]): string;
const { View, Text, StyleSheet } = ReactNative;

const styles = StyleSheet.create({
  // шапка группы: разрядка и капс «как в CSS» — на контейнере
  header: { padding: 8, letterSpacing: 2, textTransform: "uppercase" },
  title: { color: "#2563eb", fontSize: 20 },
});

const screen = (
  <View style={styles.header}>
    <Text testID="group">грудь</Text>
    <Text style={styles.title}>
      Жим <View><Text testID="badge">новое</Text></View>
    </Text>
  </View>
);

for (const f of resolve(screen, null)) console.log("модель:", JSON.stringify(f.text), f.style);
mount(screen);
setTimeout(() => {
  console.log("предпросмотр, грудь:", computed("group", ["textTransform", "letterSpacing", "color"]));
  console.log("предпросмотр, новое:", computed("badge", ["color", "fontSize"]));
}, 100);

Модель и предпросмотр разошлись дважды. «Грудь» на экране примера набрана капсом и вразрядку: CSS донёс letterSpacing и textTransform от div шапки. На телефоне будет обычное «грудь» — шапка это вид, и до абзаца от неё не доходит ничего. «Новое» в предпросмотре синее и двадцатого размера, а на телефоне будет чёрным и 14: View внутри текста начинает новый абзац с умолчаний.

И посмотрите на диагностики: их нет. В первом примере color на View компилятор поймал, а здесь letterSpacing и textTransform на том же месте прошли. Разница в пути. Там стиль был литералом прямо в пропсе, и работала проверка лишних свойств. Здесь он пришёл из StyleSheet.create, параметр которого принимает стили вида, текста и картинки вперемешку, а готовый объект { padding, letterSpacing, textTransform } сверяется с ViewStyle структурно: общее свойство padding есть, и этого достаточно. Объект совсем без свойств вида компилятор всё-таки остановит — «Тип "{ color: string; }" не может быть назначен для типа "StyleProp<ViewStyle>"», — а смешанный пропустит.

Последняя строка таблицы — про самый частый обходной путь. Раз от контейнера ничего не доходит, «шрифт на всё приложение» в React Native задают не стилем, а компонентом: своей обёрткой над Text с базовым стилем, которой пользуются вместо Text везде. В «Подходе» это AppText. Как сделать, чтобы обёртка не ломала наследование вложенного текста, — задача номер один.

Старый рецепт «один раз задать Text.defaultProps.style» в предпросмотре сработает — проверено: песочница собирает JSX в React.createElement, а он умолчания пропсов всё ещё подставляет. На телефоне — нет, и это видно по исходникам: babel-preset-expo по умолчанию собирает JSX автоматическим рантаймом, jsx() из React 19.2 defaultProps не читает, рендерер подставляет их только классам, а Text в React Native 0.86 — функция.

Справочник «Подхода» полон названий вроде «Жим штанги лёжа на наклонной скамье узким хватом». В строке списка им тесно, и CSS-привычка тут — text-overflow: ellipsis вместе с white-space: nowrap и overflow: hidden. В React Native то же делает один пропс: numberOfLines={1} — не больше одной строки, лишнее уходит под многоточие. Число может быть и больше: заметку к тренировке в ленте удобно показывать двумя строками, а целиком — на экране тренировки.

Проверим на трёх блоках: название в одну строку, заметка целиком и та же заметка в ленте. Строки считаем по высоте блока — её сообщает onLayout, событие раскладки из самого React Native, — а высота строки задана явно: 20. Прогноз: сколько строк займёт каждый блок? В заметке три строки, разделённые \n.

const { View, Text } = ReactNative;

const title = "Жим штанги лёжа на наклонной скамье узким хватом";
const note = "Спина устала к концу\nпоследний — через силу\nв следующий раз 57,5";

interface LinesProps {
  label: string;
  text: string;
  lines?: number;
}

function Lines({ label, text, lines }: LinesProps) {
  return (
    <Text
      numberOfLines={lines}
      // высота строки задана явно: по высоте блока считаем строки
      style={{ fontSize: 14, lineHeight: 20 }}
      onLayout={(e) => console.log(label, "→ строк:", e.nativeEvent.layout.height / 20)}
    >
      {text}
    </Text>
  );
}

mount(
  <View style={{ width: 240, gap: 12 }}>
    <Lines label="название, numberOfLines 1" text={title} lines={1} />
    <Lines label="заметка целиком" text={note} />
    <Lines label="заметка в ленте, numberOfLines 2" text={note} lines={2} />
  </View>,
);

Раз обрезка — дело абзаца, её место — на внешнем Text. В исходнике это видно по спискам атрибутов в TextNativeComponent.js: у нативного абзаца RCTText среди них есть numberOfLines и ellipsizeMode, а у RCTVirtualText нет ни того, ни другого. numberOfLines на вложенном тексте телефон просто не получит: у куска строки нет своих строк.

ellipsizeMode выбирает, где встанет многоточие: tail — в конце, по умолчанию; head — в начале; middle — посередине; clip — обрезать без многоточия, и в описании пропса сказано, что clip работает только на iOS. В предпросмотре выбирать бесполезно: react-native-web этот пропс не читает вовсе, и многоточие всегда в конце, хоть middle, хоть head. Не приходит там и onTextLayout — событие, в котором телефон отдаёт массив нарисованных строк lines. Узнать в предпросмотре, обрезался ли текст, этим способом не выйдет.

Название в ряду рядом с иконкой — отдельная ловушка. В предпросмотре Text в ряду сжимается и обрезается сам: у элемента ряда в CSS flex-shrink по умолчанию 1, и в нашей проверке текст сжался до 176 из 200. У Yoga, раскладки React Native, умолчание — 0, поэтому на телефоне без flexShrink: 1 текст не уступит место иконке и вылезет за край ряда. Это одно из четырёх расхождений следующей статьи.