Text: mi ez, szöveg megjelenítése és React Native

Mi az a Text a React Native-ben

A Text egy React Native komponens szöveges tartalom megjelenítésére. Ellentétben a webfejlesztéssel, ahol számos szemantikus tag létezik a szöveg számára, a React Native-ben minden szöveges elem a Text segítségével jön létre. A komponens képes megjeleníteni egyszerű szöveget és összetett struktúrákat beágyazott Text és stílusozott részekkel.

A Text automatikusan kezeli a sortördelést, vezérli a betűcsaládot, méretet, színt és igazítást. A komponens támogatja az érintési eseményeket (onPress), lehetővé téve kattintható linkek létrehozását további burkolók nélkül. Fontos korlátozás: a Text nem helyezhető el közvetlenül View-ban — csak más Text komponensekben vagy közvetlen tartalomként.

A React Native Nested Text, 2024 szerint a beágyazott Text komponensek öröklik a stílusokat a szülőtől. Ez lehetővé teszi egy alapstílus beállítását a felső szinten és egyedi tulajdonságok felülírását adott részekhez — hasonlóan a span CSS-sel való működéséhez a weben.

A Text komponens tulajdonságai és API

A Text komponens props-ok sorát kínálja a megjelenítés, viselkedés és akadálymentesítés kezeléséhez. Fő kategóriák: stílus props-ok (betűtípus, méret, szín, igazítás), megjelenítési props-ok (numberOfLines, lineBreakMode) és interaktív props-ok (onPress, onLongPress).

Szöveg megjelenítési props-ok

A numberOfLines korlátozza a megjelenített sorok számát, három pontot hozzáadva a végéhez. Az ellipsizeMode vezérli a három pont pozícióját (head, middle, tail, clip). Az adjustsFontSizeToFit automatikusan csökkenti a betűméretet, hogy a szöveg beleférjen a megadott keretbe. A lineBreakMode határozza meg, hogyan vágódik le a szöveg a numberOfLines-en túl.

Interaktív props-ok

A Text támogatja az onPress és onLongPress eseményeket az érintések kezeléséhez. Ez lehetővé teszi szöveges linkek létrehozását TouchableOpacity használata nélkül. Az onTextLayout információt ad vissza a szöveg elhelyezkedéséről renderelés után — hasznos animációkhoz és pozicionáláshoz.

Platform specifikus props-ok

iOS-en elérhető a disabled (szöveg letiltása), selectable (kijelölés engedélyezése), dataDetectorTypes (linkek, telefonszámok, címek automatikus felismerése). Androidon elérhető a selectable (textSelectable segítségével), includeFontPadding (felesleges térközök eltávolítása).

Különbségek a Text és a HTML p és span elemek között

Bár a Text vizuálisan hasonlít a HTML p és span tagekhez, az építészeti különbségek jelentősek. A React Native-ben hiányzik a DOM-modell szemantikus szöveges elemekkel — minden szöveges csomópont egyetlen Text komponensen keresztül kezelődik különböző props-okkal.

A kulcs különbség — a stílusöröklés a Text beágyazásán keresztül. Ha a külső Text fontSize: 18 és color: blue értékkel rendelkezik, az összes beágyazott Text örökli ezeket a stílusokat. Bármely prop felülírható a belső Text-ben egy adott érték megadásával. Ez kódot takarít meg és tisztább szerkezetet eredményez.

Szöveg stílusozása és betűtípusok

A Text a legtöbb CSS-tulajdonságot támogatja a tipográfiához: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. A React Native-ben a betűtípusok platform szinten csatlakoznak, nem @font-face segítségével.

Egyedi betűtípusok csatlakoztatása

Egyedi betűtípusok használatához hozzá kell adni őket az assets/fonts mappához és meg kell adni a react-native.config.js-ben. Az alkalmazás újraépítése után a betűtípus elérhetővé válik a fontFamily-n keresztül. A React Native nem támogatja közvetlenül a webes betűtípusokat (Google Fonts) — .ttf vagy .otf fájlok letöltése szükséges.

Stílusöröklés és kaszkád

Az öröklési mechanizmus a Text-ben eltér a CSS-től. Stílusok csak Text-től beágyazott Text-ig terjednek, de View-tól Text-ig nem. Ha az egész alkalmazáshoz be kell állítani egy betűtípust, a Text komponens defaultProps-ját vagy egy egyedi burkoló komponenst kell használni.

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

Ebben a példában a külső Text beállítja a fontSize: 18 és color: #333 értékeket. A belső Text örökli a fontSize-t (18), de felülírja a fontWeight-ot bold-ra és a color-t #007AFF-re. A külső Text csak a saját stílusait örökli. Ez pontos analógiája a beágyazott span működésének HTML-ben.

Gyakorlati példák a Text használatával

Vizsgáljunk meg két tipikus forgatókönyvet a Text használatára React Native-ben: szöveg formázása beágyazással és kattintható komponens létrehozása sor korlátozással.

1. példa: hírkártya formázással

Ebben a példában a Text többsoros szöveg megjelenítésére szolgál kiemelt elemekkel: cím, dátum és tartalom linkkel.

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

Ebben a szerkezetben három független Text komponens van (cím, dátum, tartalom), mindegyik saját stílussal. A tartalmat tartalmazó Text-en belül van egy másik Text onPress-szel a linkhez. Ez a minta hírfolyamokhoz, blogokhoz és hozzászólásokhoz használatos.

2. példa: szöveg sor korlátozással

Szöveg előnézetének megjelenítéséhez három ponttal a numberOfLines használatos. Ez egy szabványos minta termékkártyákhoz és listákban szereplő cikkekhez.

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

A numberOfLines = 2 tulajdonság két sorra korlátozza a szöveget. Ha a szöveg hosszabb, a React Native automatikusan három pontot ad a második sor végéhez. Az ellipsizeMode: 'tail' paraméter azt jelzi, hogy a három pont a végén legyen (head, middle, clip is elérhető).