Text: что это, отображение текста и React Native

Что такое Text в React Native

Text — это компонент React Native для отображения текстового содержимого. В отличие от веб-разработки, где существует множество семантических тегов для текста, в React Native все текстовые элементы создаются через Text. Компонент может отображать как простой текст, так и сложные структуры с вложенными Text и стилизованными фрагментами.

Text автоматически обрабатывает перенос строк, управляет гарнитурой, размером, цветом и выравниванием. Компонент поддерживает события касания (onPress), что позволяет создавать кликабельные ссылки без дополнительных обёрток. Важное ограничение: Text нельзя вкладывать в View напрямую — только в другие Text-компоненты или в качестве прямого содержимого.

По данным React Native Nested Text, 2024, вложенные Text-компоненты наследуют стили от родителя. Это позволяет задать базовый стиль на верхнем уровне и переопределять отдельные свойства для конкретных фрагментов — аналогично работе span с CSS в вебе.

Свойства и API компонента Text

Компонент Text предоставляет набор пропсов для управления отображением, поведением и доступностью. Ключевые категории: стилевые пропсы (шрифт, размер, цвет, выравнивание), пропсы отображения (numberOfLines, lineBreakMode) и интерактивные (onPress, onLongPress).

Пропсы отображения текста

numberOfLines ограничивает количество отображаемых строк, добавляя многоточие в конце. ellipsizeMode управляет положением многоточия (head, middle, tail, clip). adjustsFontSizeToFit автоматически уменьшает размер шрифта, чтобы текст поместился в заданные рамки. lineBreakMode определяет, как обрезать текст за пределами numberOfLines.

Интерактивные пропсы

Text поддерживает onPress и onLongPress для обработки касаний. Это позволяет делать текстовые ссылки без использования TouchableOpacity. onTextLayout возвращает информацию о расположении текста после рендеринга — полезно для анимаций и позиционирования.

Платформенные пропсы

На iOS доступен disabled (отключает текст), selectable (включает выделение), dataDetectorTypes (автоматическое распознавание ссылок, телефонов, адресов). На Android доступен selectable (через textSelectable), includeFontPadding (убирает лишние отступы).

Отличия Text от HTML элементов p и span

Хотя Text визуально похож на HTML-теги p и span, архитектурные различия существенны. В React Native отсутствует DOM-модель с семантическими текстовыми элементами — все текстовые узлы обрабатываются через единый компонент Text с различными пропсами.

Ключевое отличие — наследование стилей через вложенность Text. Если внешний Text имеет fontSize: 18 и color: blue, все вложенные Text наследуют эти стили. Переопределить можно любой пропс во внутреннем Text, задав конкретное значение. Это экономит код и делает структуру чище.

Стилизация текста и шрифты

Text поддерживает большинство CSS-свойств для типографики: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. В React Native шрифты подключаются на уровне платформы, а не через @font-face.

Подключение кастомных шрифтов

Для использования кастомных шрифтов их нужно добавить в папку assets/fonts и указать в react-native.config.js. После пересборки приложения шрифт становится доступен через fontFamily. React Native не поддерживает web-шрифты (Google Fonts) напрямую — требуется скачивание файлов .ttf или .otf.

Наследование и каскад стилей

Механизм наследования в Text отличается от CSS. Стили передаются только от Text к вложенному Text, но не от View к Text. Если нужно задать шрифт для всего приложения, используется defaultProps компонента Text или кастомный компонент-обёртка.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

В этом примере внешний Text задаёт fontSize: 18 и color: #333. Внутренний Text наследует fontSize (18), но переопределяет fontWeight на bold и color на #007AFF. Внешний Text наследует только свои стили. Это точная аналогия работы вложенных span в HTML.

Практические примеры с Text

Рассмотрим два типовых сценария использования Text в React Native: форматирование текста с вложенностью и создание кликабельного компонента с ограничением строк.

Пример 1: карточка новости с форматированием

В этом примере Text используется для отображения многострочного текста с выделенными элементами: заголовок, дата и содержимое с ссылкой.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

В этой структуре три независимых Text-компонента (заголовок, дата, контент), каждый со своим стилем. Внутри Text с контентом вложен ещё один Text с onPress для ссылки. Такой паттерн используется для новостных лент, блогов и комментариев.

Пример 2: текст с ограничением строк

Для отображения превью текста с многоточием используется numberOfLines. Это стандартный паттерн для карточек товаров и статей в списках.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

Свойство numberOfLines = 2 ограничивает текст двумя строками. Если текст длиннее, React Native автоматически добавляет многоточие в конце второй строки. Параметр ellipsizeMode: 'tail' указывает, что многоточие должно быть в конце (доступны также head, middle, clip).