Text: co to je, zobrazení textu a React Native

Co je Text v React Native

Text je komponenta React Native pro zobrazení textového obsahu. Na rozdíl od vývoje pro web, kde existuje mnoho sémantických tagů pro text, v React Native jsou všechny textové prvky vytvářeny pomocí Text. Komponenta může zobrazit jak prostý text, tak složité struktury s vnořenými Text a stylizovanými fragmenty.

Text automaticky zpracovává zalamování řádků, řídí rodinu písma, velikost, barvu a zarovnání. Komponenta podporuje dotykové události (onPress), což umožňuje vytvářet klikatelné odkazy bez dalších obalů. Důležité omezení: Text nelze vložit přímo do View — pouze do jiných Text komponent nebo jako přímý obsah.

Podle React Native Nested Text, 2024 vnořené Text komponenty dědí styly od rodiče. To umožňuje nastavit základní styl na horní úrovni a přepsat jednotlivé vlastnosti pro konkrétní fragmenty — obdobně jako funguje span s CSS na webu.

Vlastnosti a API komponenty Text

Komponenta Text poskytuje sadu props pro správu zobrazení, chování a přístupnosti. Klíčové kategorie: stylové props (písmo, velikost, barva, zarovnání), props zobrazení (numberOfLines, lineBreakMode) a interaktivní (onPress, onLongPress).

Props zobrazení textu

numberOfLines omezuje počet zobrazených řádků a na konci přidává tři tečky. ellipsizeMode řídí polohu tří teček (head, middle, tail, clip). adjustsFontSizeToFit automaticky zmenšuje velikost písma, aby se text vešel do daných hranic. lineBreakMode určuje, jak oříznout text přesahující numberOfLines.

Interaktivní props

Text podporuje onPress a onLongPress pro zpracování dotyků. To umožňuje vytvářet textové odkazy bez použití TouchableOpacity. onTextLayout vrací informace o umístění textu po renderování — užitečné pro animace a pozicování.

Platformní props

Na iOS je k dispozici disabled (vypne text), selectable (zapne výběr), dataDetectorTypes (automatické rozpoznávání odkazů, telefonů, adres). Na Androidu je k dispozici selectable (přes textSelectable), includeFontPadding (odstraní nadbytečné mezery).

Rozdíly mezi Text a HTML elementy p a span

Ačkoli Text vizuálně připomíná HTML tagy p a span, architektonické rozdíly jsou podstatné. V React Native chybí model DOM se sémantickými textovými prvky — všechny textové uzly jsou zpracovávány prostřednictvím jediné komponenty Text s různými props.

Klíčový rozdíl — dědění stylů prostřednictvím vnořování Text. Pokud má vnější Text fontSize: 18 a color: blue, všechny vnořené Text tyto styly dědí. Libovolnou props lze ve vnitřním Text přepsat nastavením konkrétní hodnoty. To šetří kód a činí strukturu čistší.

Stylování textu a písma

Text podporuje většinu vlastností CSS pro typografii: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. V React Native se písma připojují na úrovni platformy, nikoli přes @font-face.

Připojení vlastních písem

Pro použití vlastních písem je třeba je přidat do složky assets/fonts a uvést v react-native.config.js. Po přestavění aplikace je písmo dostupné přes fontFamily. React Native nepodporuje přímo webová písma (Google Fonts) — je vyžadováno stažení souborů .ttf nebo .otf.

Dědění a kaskáda stylů

Mechanismus dědění v Text se liší od CSS. Styly se předávají pouze z Text do vnořeného Text, ale ne z View do Text. Pokud je třeba nastavit písmo pro celou aplikaci, použije se defaultProps komponenty Text nebo vlastní obalová komponenta.

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

V tomto příkladu vnější Text nastaví fontSize: 18 a color: #333. Vnitřní Text dědí fontSize (18), ale přepíše fontWeight na bold a color na #007AFF. Vnější Text dědí pouze své vlastní styly. Toto je přesná analogie fungování vnořených span v HTML.

Praktické příklady s Text

Podívejme se na dva typické scénáře použití Text v React Native: formátování textu s vnořováním a vytvoření klikatelné komponenty s omezením řádků.

Příklad 1: zpravodajská karta s formátováním

V tomto příkladu je Text použit k zobrazení víceřádkového textu se zvýrazněnými prvky: nadpis, datum a obsah s odkazem.

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

V této struktuře jsou tři nezávislé Text komponenty (nadpis, datum, obsah), každá s vlastním stylem. Uvnitř Text s obsahem je vnořen další Text s onPress pro odkaz. Tento vzor se používá pro zpravodajské kanály, blogy a komentáře.

Příklad 2: text s omezením řádků

Pro zobrazení náhledu textu se třemi tečkami se používá numberOfLines. Toto je standardní vzor pro karty produktů a články v seznamech.

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

Vlastnost numberOfLines = 2 omezuje text na dva řádky. Pokud je text delší, React Native automaticky přidá tři tečky na konec druhého řádku. Parametr ellipsizeMode: 'tail' určuje, že tři tečky mají být na konci (k dispozici jsou také head, middle, clip).