Text: cos'è, visualizzazione del testo e React Native

Cos'è Text in React Native

Text è un componente React Native per visualizzare contenuti testuali. A differenza dello sviluppo web, dove esistono molti tag semantici per il testo, in React Native tutti gli elementi di testo vengono creati tramite Text. Il componente può visualizzare sia testo semplice che strutture complesse con Text annidati e frammenti stilizzati.

Text gestisce automaticamente il ritorno a capo, gestisce la famiglia di font, la dimensione, il colore e l'allineamento. Il componente supporta gli eventi tattili (onPress), consentendo di creare link cliccabili senza wrapper aggiuntivi. Una limitazione importante: Text non può essere annidato direttamente all'interno di View — solo all'interno di altri componenti Text o come figli diretti.

Secondo React Native Nested Text, 2024, i componenti Text annidati ereditano gli stili dal genitore. Ciò consente di impostare uno stile di base al livello superiore e sovrascrivere proprietà individuali per frammenti specifici — simile a come span funziona con CSS sul web.

Proprietà e API del componente Text

Il componente Text fornisce un insieme di props per controllare la visualizzazione, il comportamento e l'accessibilità. Categorie principali: props di stile (font, dimensione, colore, allineamento), props di visualizzazione (numberOfLines, lineBreakMode) e props interattive (onPress, onLongPress).

Props di visualizzazione del testo

numberOfLines limita il numero di righe visualizzate, aggiungendo puntini di sospensione alla fine. ellipsizeMode controlla la posizione dei puntini di sospensione (head, middle, tail, clip). adjustsFontSizeToFit riduce automaticamente la dimensione del font per adattare il testo entro i limiti impostati. lineBreakMode determina come il testo viene troncato oltre numberOfLines.

Props interattive

Text supporta onPress e onLongPress per gestire i tocchi. Ciò consente di creare link testuali senza utilizzare TouchableOpacity. onTextLayout restituisce informazioni sul layout del testo dopo il rendering — utile per animazioni e posizionamento.

Props specifiche della piattaforma

Su iOS sono disponibili disabled (disabilita il testo), selectable (abilita la selezione) e dataDetectorTypes (rilevamento automatico di link, telefoni, indirizzi). Su Android sono disponibili selectable (tramite textSelectable) e includeFontPadding (rimuove il padding extra).

Differenze tra Text e gli elementi p e span di HTML

Sebbene Text assomigli visivamente ai tag HTML p e span, le differenze architetturali sono significative. React Native non ha un modello DOM con elementi di testo semantici — tutti i nodi di testo vengono gestiti tramite un unico componente Text con varie props.

La differenza chiave è l'ereditarietà degli stili tramite l'annidamento di Text. Se un Text esterno ha fontSize: 18 e color: blue, tutti i componenti Text annidati ereditano questi stili. Qualsiasi prop può essere sovrascritta nel Text interno impostando un valore specifico. Questo risparmia codice e mantiene la struttura più pulita.

Stilizzazione del testo e font

Text supporta la maggior parte delle proprietà CSS per la tipografia: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. In React Native, i font vengono collegati a livello di piattaforma, non tramite @font-face.

Utilizzo di font personalizzati

Per utilizzare font personalizzati, devono essere aggiunti alla cartella assets/fonts e specificati in react-native.config.js. Dopo aver ricostruito l'applicazione, il font diventa disponibile tramite fontFamily. React Native non supporta i font web (Google Fonts) direttamente — è necessario scaricare file .ttf o .otf.

Ereditarietà e cascata degli stili

Il meccanismo di ereditarietà in Text differisce dal CSS. Gli stili vengono trasmessi solo da Text a Text annidato, ma non da View a Text. Per impostare un font per l'intera applicazione, si utilizzano i defaultProps del componente Text o un componente wrapper personalizzato.

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

In questo esempio, il Text esterno imposta fontSize: 18 e color: #333. Il Text interno eredita fontSize (18), ma sovrascrive fontWeight a bold e color a #007AFF. Il Text esterno eredita solo i propri stili. Questa è un'analogia esatta di come funziona span annidato in HTML.

Esempi pratici con Text

Esaminiamo due casi d'uso tipici di Text in React Native: formattazione del testo con annidamento e creazione di un componente cliccabile con limite di righe.

Esempio 1: scheda notizia con formattazione

In questo esempio, Text viene utilizzato per visualizzare testo su più righe con elementi evidenziati: titolo, data e contenuto con un 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>
);

Questa struttura ha tre componenti Text indipendenti (titolo, data, contenuto), ciascuno con il proprio stile. All'interno del Text di contenuto, un altro Text con onPress è annidato per il link. Questo modello viene utilizzato per feed di notizie, blog e commenti.

Esempio 2: testo con limite di righe

Per visualizzare anteprime di testo con puntini di sospensione, si usa numberOfLines. Questo è un modello standard per schede prodotto e elenchi di articoli.

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

La proprietà numberOfLines = 2 limita il testo a due righe. Se il testo è più lungo, React Native aggiunge automaticamente puntini di sospensione alla fine della seconda riga. Il parametro ellipsizeMode: 'tail' specifica che i puntini di sospensione devono essere alla fine (sono disponibili anche head, middle e clip).