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 предоставя набор от props за управление на показването, поведението и достъпността. Ключови категории: стилови props (шрифт, размер, цвят, подравняване), props за показване (numberOfLines, lineBreakMode) и интерактивни (onPress, onLongPress).

Props за показване на текст

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

Интерактивни props

Text поддържа onPress и onLongPress за обработка на докосвания. Това позволява създаване на текстови връзки без използване на TouchableOpacity. onTextLayout връща информация за позицията на текста след рендериране — полезно за анимации и позициониране.

Платформени props

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

Разлики между Text и HTML елементите p и span

Въпреки че Text визуално прилича на HTML таговете p и span, архитектурните разлики са съществени. В React Native липсва DOM модел със семантични текстови елементи — всички текстови възли се обработват чрез единен компонент Text с различни props.

Ключовата разлика — наследяване на стилове чрез влагане на 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 също са налични).