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 від елементів p і span у HTML

Хоча 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 не підтримує веб-шрифти (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).