Text: co to jest, wyświetlanie tekstu i React Native

Czym jest Text w React Native

Text to komponent React Native do wyświetlania treści tekstowej. W przeciwieństwie do tworzenia stron internetowych, gdzie istnieje wiele semantycznych tagów dla tekstu, w React Native wszystkie elementy tekstowe są tworzone przez Text. Komponent może wyświetlać zarówno prosty tekst, jak i złożone struktury z zagnieżdżonymi Text i stylizowanymi fragmentami.

Text automatycznie obsługuje zawijanie wierszy, zarządza krójem pisma, rozmiarem, kolorem i wyrównaniem. Komponent obsługuje zdarzenia dotykowe (onPress), co pozwala tworzyć klikalne linki bez dodatkowych otok. Ważne ograniczenie: Text nie można zagnieżdżać w View bezpośrednio — tylko w innych komponentach Text lub jako bezpośrednia treść.

Według React Native Nested Text, 2024, zagnieżdżone komponenty Text dziedziczą style od rodzica. Pozwala to ustawić bazowy styl na górnym poziomie i nadpisywać poszczególne właściwości dla konkretnych fragmentów — analogicznie do działania span z CSS w webie.

Właściwości i API komponentu Text

Komponent Text udostępnia zestaw propsów do zarządzania wyświetlaniem, zachowaniem i dostępnością. Kluczowe kategorie: propsy stylowe (krój pisma, rozmiar, kolor, wyrównanie), propsy wyświetlania (numberOfLines, lineBreakMode) i interaktywne (onPress, onLongPress).

Propsy wyświetlania tekstu

numberOfLines ogranicza liczbę wyświetlanych wierszy, dodając wielokropek na końcu. ellipsizeMode zarządza położeniem wielokropka (head, middle, tail, clip). adjustsFontSizeToFit automatycznie zmniejsza rozmiar czcionki, aby tekst zmieścił się w zadanych ramach. lineBreakMode określa, jak przycinać tekst poza numberOfLines.

Interaktywne props

Text obsługuje onPress i onLongPress do obsługi dotknięć. Pozwala to tworzyć tekstowe linki bez używania TouchableOpacity. onTextLayout zwraca informacje o położeniu tekstu po renderowaniu — przydatne do animacji i pozycjonowania.

Propsy platformowe

Na iOS dostępny jest disabled (wyłącza tekst), selectable (włącza zaznaczanie), dataDetectorTypes (automatyczne rozpoznawanie linków, telefonów, adresów). Na Androidzie dostępny jest selectable (przez textSelectable), includeFontPadding (usuwa zbędne odstępy).

Różnice między Text a HTML-owymi elementami p i span

Choć Text wizualnie przypomina HTML-owe tagi p i span, różnice architektoniczne są znaczące. W React Native brakuje modelu DOM z semantycznymi elementami tekstowymi — wszystkie węzły tekstowe są obsługiwane przez jeden komponent Text z różnymi propsami.

Kluczowa różnica — dziedziczenie stylów przez zagnieżdżanie Text. Jeśli zewnętrzny Text ma fontSize: 18 i color: blue, wszystkie zagnieżdżone Text dziedziczą te style. Można nadpisać dowolny props w wewnętrznym Text, podając konkretną wartość. Oszczędza to kod i czyni strukturę czystszą.

Stylizacja tekstu i czcionki

Text obsługuje większość właściwości CSS dla typografii: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. W React Native czcionki są podłączane na poziomie platformy, a nie przez @font-face.

Podłączanie niestandardowych czcionek

Aby używać niestandardowych czcionek, należy dodać je do folderu assets/fonts i wskazać w react-native.config.js. Po przebudowaniu aplikacji czcionka staje się dostępna przez fontFamily. React Native nie obsługuje bezpośrednio web-czcionek (Google Fonts) — wymagane jest pobranie plików .ttf lub .otf.

Dziedziczenie i kaskada stylów

Mechanizm dziedziczenia w Text różni się od CSS. Style są przekazywane tylko z Text do zagnieżdżonego Text, ale nie z View do Text. Jeśli trzeba ustawić czcionkę dla całej aplikacji, używa się defaultProps komponentu Text lub niestandardowego komponentu-opakowującego.

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

W tym przykładzie zewnętrzny Text ustawia fontSize: 18 i color: #333. Wewnętrzny Text dziedziczy fontSize (18), ale nadpisuje fontWeight na bold i color na #007AFF. Zewnętrzny Text dziedziczy tylko swoje style. Jest to dokładna analogia działania zagnieżdżonych span w HTML.

Praktyczne przykłady z Text

Rozważmy dwa typowe scenariusze użycia Text w React Native: formatowanie tekstu z zagnieżdżaniem i tworzenie klikalnego komponentu z ograniczeniem wierszy.

Przykład 1: karta wiadomości z formatowaniem

W tym przykładzie Text jest używany do wyświetlania wielowierszowego tekstu z wyróżnionymi elementami: nagłówek, data i treść z linkiem.

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

W tej strukturze trzy niezależne komponenty Text (nagłówek, data, treść), każdy z własnym stylem. Wewnątrz Text z treścią zagnieżdżony jest kolejny Text z onPress dla linku. Taki wzorzec jest używany w kanałach wiadomości, blogach i komentarzach.

Przykład 2: tekst z ograniczeniem wierszy

Do wyświetlania podglądu tekstu z wielokropkiem używa się numberOfLines. Jest to standardowy wzorzec dla kart produktów i artykułów na listach.

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

Właściwość numberOfLines = 2 ogranicza tekst do dwóch wierszy. Jeśli tekst jest dłuższy, React Native automatycznie dodaje wielokropek na końcu drugiego wiersza. Parametr ellipsizeMode: 'tail' wskazuje, że wielokropek ma być na końcu (dostępne są również head, middle, clip).