Text: шта је то, приказ текста и React Native

Шта је Text у React Native

Text је React Native компонента за приказ текстуалног садржаја. За разлику од веб развоја, гдје постоји мноштво семантичких тагова за текст, у React Native-у се сви текстуални елементи креирају путем Text-а. Компонента може приказати како обичан текст, тако и сложене структуре са угњежђеним Text и стилизованим фрагментима.

Text аутоматски обрађује прелом редова, управља гарнитуром, величином, бојом и поравнањем. Компонента подржава догађаје додира (onPress), што омогућава стварање кликабилних линкова без додатних омотача. Важно ограничење: Text се не може угњеждити директно у View — само у друге Text компоненте или као директан садржај.

Према React Native Nested Text, 2024, угњежђене Text компоненте насљеђују стилове од родитеља. Ово омогућава постављање основног стила на горњем нивоу и преиначавање појединачних својстава за одређене фрагменте — слично раду span-а са CSS-ом у вебу.

Својства и API компоненте Text

Компонента Text нуди скуп prop-сова за управљање приказом, понашањем и приступачношћу. Кључне категорије: стилски prop-сови (фонт, величина, боја, поравнање), prop-сови приказа (numberOfLines, lineBreakMode) и интерактивни (onPress, onLongPress).

Prop-сови за приказ текста

numberOfLines ограничава број приказаних редова, додајући три тачке на крају. ellipsizeMode управља положајем три тачке (head, middle, tail, clip). adjustsFontSizeToFit аутоматски смањује величину фонта како би текст стао у задате оквире. lineBreakMode одређује како скратити текст изван numberOfLines.

Интерактивни prop-сови

Text подржава onPress и onLongPress за обраду додира. Ово омогућава прављење текст линкова без коришћења TouchableOpacity. onTextLayout враћа информације о положају текста након рендеровања — корисно за анимације и позиционирање.

Платформски prop-сови

На iOS-у су доступни disabled (искључује текст), selectable (укључује селекцију), dataDetectorTypes (аутоматско препознавање линкова, телефона, адреса). На Android-у су доступни selectable (путем textSelectable), includeFontPadding (уклања додатне размаке).

Разлике између Text и HTML елемената p и span

Иако је Text визуелно сличан HTML таговима p и span, архитектуралне разлике су значајне. У React Native-у недостаје DOM модел са семантичким текстуалним елементима — сви текстуални чворови се обрађују кроз јединствену Text компоненту са различитим prop-совима.

Кључна разлика — насљеђивање стилова кроз угњежђавање Text-а. Ако спољашњи Text има fontSize: 18 и color: blue, сви угњежђени Text-ови насљеђују ове стилове. Било који prop се може преиначити у унутрашњем Text-у задавањем конкретне вриједности. Ово штеди код и чини структуру чистијом.

Стилизовање текста и фонтови

Text подржава већину CSS својстава за типографију: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. У React Native-у фонтови се повезују на нивоу платформе, а не путем @font-face.

Повезивање прилагођених фонтова

За коришћење прилагођених фонтова потребно их је додати у фасциклу assets/fonts и навести у react-native.config.js. Након поновне изградње апликације, фонт постаје доступан путем fontFamily. React Native не подржава веб-фонтове (Google Fonts) директно — потребно је преузимање .ttf или .otf датотека.

Насљеђивање и каскада стилова

Механизам насљеђивања у Text-у се разликује од CSS-а. Стилови се преносе само са Text-а на угњежђени Text, али не са View-а на Text. Ако је потребно поставити фонт за цијелу апликацију, користи се defaultProps компоненте Text или прилагођена компонента-омотач.

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

У овом примјеру спољашњи Text поставља fontSize: 18 и color: #333. Унутрашњи Text насљеђује fontSize (18), али преиначава fontWeight на bold и color на #007AFF. Спољашњи Text насљеђује само своје стилове. Ово је тачна аналогија рада угњежђених span-ова у HTML-у.

Практични примјери са Text

Размотримо два типична сценарија коришћења Text у React Native-у: форматирање текста са угњежђавањем и стварање кликабилне компоненте са ограничењем редова.

Примјер 1: вијест картица са форматирањем

У овом примјеру Text се користи за приказ вишередног текста са истакнутим елементима: наслов, датум и садржај са линком.

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

У овој структури постоје три независне Text компоненте (наслов, датум, садржај), свака са својим стилом. Унутар Text-а са садржајем угњежђен је још један Text са onPress за линк. Овај образац се користи за вијести феедове, блогове и коментаре.

Примјер 2: текст са ограничењем редова

За приказ прегледа текста са три тачке користи се numberOfLines. Ово је стандардни образац за картице производа и чланака на листама.

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

Својство numberOfLines = 2 ограничава текст на два реда. Ако је текст дужи, React Native аутоматски додаје три тачке на крају другог реда. Параметар ellipsizeMode: 'tail' указује да три тачке треба да буду на крају (доступни су и head, middle, clip).