Text: ce este, afișarea textului și React Native

Ce este Text în React Native

Text este o componentă React Native pentru afișarea conținutului text. Spre deosebire de dezvoltarea web, unde există numeroase taguri semantice pentru text, în React Native toate elementele text sunt create prin Text. Componenta poate afișa atât text simplu, cât și structuri complexe cu Text imbricate și fragmente stilizate.

Text gestionează automat întreruperea rândurilor, controlează familia de caractere, dimensiunea, culoarea și alinierea. Componenta suportă evenimente de atingere (onPress), permițând crearea de linkuri clickabile fără împachetări suplimentare. O limitare importantă: Text nu poate fi introdus direct în View — doar în alte componente Text sau ca conținut direct.

Conform React Native Nested Text, 2024, componentele Text imbricate moștenesc stilurile de la părinte. Acest lucru permite setarea unui stil de bază la nivel superior și suprascrierea proprietăților individuale pentru fragmente specifice — similar modului în care funcționează span cu CSS în web.

Proprietăți și API ale componentei Text

Componenta Text oferă un set de props pentru gestionarea afișării, comportamentului și accesibilității. Categorii cheie: props de stil (font, dimensiune, culoare, aliniere), props de afișare (numberOfLines, lineBreakMode) și interactive (onPress, onLongPress).

Props de afișare a textului

numberOfLines limitează numărul de rânduri afișate, adăugând puncte de suspensie la sfârșit. ellipsizeMode controlează poziția punctelor de suspensie (head, middle, tail, clip). adjustsFontSizeToFit reduce automat dimensiunea fontului pentru ca textul să încapă în limitele date. lineBreakMode determină modul de tăiere a textului dincolo de numberOfLines.

Props interactive

Text suportă onPress și onLongPress pentru gestionarea atingerilor. Acest lucru permite crearea de linkuri text fără a utiliza TouchableOpacity. onTextLayout returnează informații despre poziționarea textului după randare — util pentru animații și poziționare.

Props de platformă

Pe iOS sunt disponibile disabled (dezactivează textul), selectable (activează selecția), dataDetectorTypes (recunoașterea automată a linkurilor, telefoanelor, adreselor). Pe Android sunt disponibile selectable (prin textSelectable), includeFontPadding (elimină spațiile suplimentare).

Diferențele între Text și elementele HTML p și span

Deși Text seamănă vizual cu tagurile HTML p și span, diferențele arhitecturale sunt semnificative. În React Native lipsește modelul DOM cu elemente text semantice — toate nodurile text sunt gestionate printr-o singură componentă Text cu diferite props.

Diferența cheie — moștenirea stilurilor prin imbricarea Text. Dacă Text exterior are fontSize: 18 și color: blue, toate Texturile imbricate moștenesc aceste stiluri. Orice prop poate fi suprascris în Textul interior prin setarea unei valori specifice. Acest lucru economisește cod și face structura mai curată.

Stilizarea textului și fonturile

Text suportă majoritatea proprietăților CSS pentru tipografie: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. În React Native, fonturile se conectează la nivel de platformă, nu prin @font-face.

Conectarea fonturilor personalizate

Pentru a utiliza fonturi personalizate, acestea trebuie adăugate în folderul assets/fonts și specificate în react-native.config.js. După reconstruirea aplicației, fontul devine disponibil prin fontFamily. React Native nu suportă direct fonturile web (Google Fonts) — este necesară descărcarea fișierelor .ttf sau .otf.

Moștenirea și cascada stilurilor

Mecanismul de moștenire în Text diferă de CSS. Stilurile se transmit doar de la Text la Text imbricat, dar nu de la View la Text. Dacă trebuie setat un font pentru întreaga aplicație, se utilizează defaultProps ale componentei Text sau o componentă wrapper personalizată.

<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>

În acest exemplu, Textul exterior setează fontSize: 18 și color: #333. Textul interior moștenește fontSize (18), dar suprascrie fontWeight la bold și color la #007AFF. Textul exterior moștenește doar propriile stiluri. Aceasta este o analogie exactă a modului de funcționare a spanurilor imbricate în HTML.

Exemple practice cu Text

Să analizăm două scenarii tipice de utilizare a Text în React Native: formatarea textului cu imbricare și crearea unei componente clickabile cu limitare de rânduri.

Exemplul 1: card de știri cu formatare

În acest exemplu, Text este utilizat pentru afișarea textului pe mai multe rânduri cu elemente evidențiate: titlu, dată și conținut cu link.

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>
);

În această structură există trei componente Text independente (titlu, dată, conținut), fiecare cu propriul stil. În interiorul Textului cu conținut este imbricat un alt Text cu onPress pentru link. Acest model este utilizat pentru fluxuri de știri, bloguri și comentarii.

Exemplul 2: text cu limitare de rânduri

Pentru afișarea previzualizării textului cu puncte de suspensie se utilizează numberOfLines. Acesta este un model standard pentru cardurile de produse și articolele din liste.

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

Proprietatea numberOfLines = 2 limitează textul la două rânduri. Dacă textul este mai lung, React Native adaugă automat puncte de suspensie la sfârșitul celui de-al doilea rând. Parametrul ellipsizeMode: 'tail' indică faptul că punctele de suspensie trebuie să fie la sfârșit (sunt disponibile și head, middle, clip).