Text: ano ito, pagpapakita ng teksto at React Native

Ano ang Text sa React Native

Text ay isang sangkap ng React Native para sa pagpapakita ng tekstuwal na nilalaman. Hindi tulad sa pag-develop ng web, kung saan maraming semantikong tag para sa teksto, sa React Native lahat ng elemento ng teksto ay ginagawa sa pamamagitan ng Text. Ang sangkap ay maaaring magpakita ng parehong simpleng teksto at kumplikadong mga istraktura na may nested Text at naka-istilong mga fragment.

Awtomatikong pinangangasiwaan ng Text ang pagputol ng linya, kinokontrol ang pamilya ng font, laki, kulay at pagkakahanay. Sinusuportahan ng sangkap ang mga touch event (onPress), na nagpapahintulot sa paggawa ng mga naki-click na link nang walang karagdagang mga wrapper. Isang mahalagang limitasyon: Ang Text ay hindi maaaring direktang ilagay sa View — sa iba pang mga sangkap na Text lamang o bilang direktang nilalaman.

Ayon sa React Native Nested Text, 2024, ang mga nested na sangkap na Text ay nagmamana ng mga estilo mula sa magulang. Ito ay nagpapahintulot sa pagtatakda ng base na estilo sa itaas na antas at pag-override ng mga indibidwal na katangian para sa mga tiyak na fragment — katulad ng paggana ng span gamit ang CSS sa web.

Mga katangian at API ng sangkap na Text

Ang sangkap na Text ay nagbibigay ng isang set ng mga props para sa pamamahala ng pagpapakita, pag-uugali at accessibility. Mga pangunahing kategorya: mga props ng estilo (font, laki, kulay, pagkakahanay), mga props ng pagpapakita (numberOfLines, lineBreakMode) at interaktibo (onPress, onLongPress).

Mga props ng pagpapakita ng teksto

numberOfLines ay naglilimita sa bilang ng mga linyang ipinapakita, nagdaragdag ng elipsis sa dulo. ellipsizeMode ay kumokontrol sa posisyon ng elipsis (head, middle, tail, clip). adjustsFontSizeToFit ay awtomatikong nagpapaliit ng laki ng font upang kasya ang teksto sa itinakdang hangganan. lineBreakMode ay tumutukoy kung paano putulin ang teksto na lampas sa numberOfLines.

Mga interaktibong props

Sinusuportahan ng Text ang onPress at onLongPress para sa pagproseso ng mga pagpindot. Ito ay nagpapahintulot sa paggawa ng mga tekstuwal na link nang hindi ginagamit ang TouchableOpacity. onTextLayout ay nagbabalik ng impormasyon tungkol sa posisyon ng teksto pagkatapos ng rendering — kapaki-pakinabang para sa mga animation at pagpoposisyon.

Mga props ng platform

Sa iOS available ang disabled (nag-disable ng teksto), selectable (nagpapagana ng pagpili), dataDetectorTypes (awtomatikong pagkilala ng mga link, telepono, address). Sa Android available ang selectable (sa pamamagitan ng textSelectable), includeFontPadding (nag-aalis ng dagdag na espasyo).

Mga pagkakaiba ng Text sa mga elementong HTML p at span

Kahit na ang Text ay biswal na katulad ng mga HTML tag na p at span, ang mga pagkakaiba sa arkitektura ay makabuluhan. Sa React Native ay walang modelo ng DOM na may mga semantikong elemento ng teksto — lahat ng node ng teksto ay pinangangasiwaan sa pamamagitan ng iisang sangkap na Text na may iba't ibang props.

Ang pangunahing pagkakaiba — pamana ng mga estilo sa pamamagitan ng nesting ng Text. Kung ang panlabas na Text ay may fontSize: 18 at color: blue, lahat ng nested Text ay nagmamana ng mga estilong ito. Anumang prop ay maaaring i-override sa panloob na Text sa pamamagitan ng pagtatakda ng tiyak na halaga. Ito ay nakakatipid ng code at ginagawang mas malinis ang istraktura.

Pag-istilo ng teksto at mga font

Sinusuportahan ng Text ang karamihan sa mga katangian ng CSS para sa tipograpiya: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. Sa React Native, ang mga font ay ikinokonekta sa antas ng platform, hindi sa pamamagitan ng @font-face.

Pagkonekta ng mga custom na font

Upang gumamit ng mga custom na font, kailangan idagdag ang mga ito sa folder na assets/fonts at tukuyin sa react-native.config.js. Pagkatapos muling itayo ang app, ang font ay magiging available sa pamamagitan ng fontFamily. Hindi direktang sinusuportahan ng React Native ang mga web font (Google Fonts) — kinakailangan ang pag-download ng mga .ttf o .otf file.

Pamana at kaskada ng mga estilo

Ang mekanismo ng pamana sa Text ay naiiba sa CSS. Ang mga estilo ay ipinapasa lamang mula sa Text patungo sa nested Text, ngunit hindi mula sa View patungo sa Text. Kung kailangan magtakda ng font para sa buong app, ginagamit ang defaultProps ng sangkap na Text o isang custom na sangkap na wrapper.

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

Sa halimbawang ito, ang panlabas na Text ay nagtatakda ng fontSize: 18 at color: #333. Ang panloob na Text ay nagmamana ng fontSize (18), ngunit ina-override ang fontWeight sa bold at color sa #007AFF. Ang panlabas na Text ay nagmamana lamang ng sarili nitong mga estilo. Ito ay eksaktong pagkakatulad ng paggana ng nested span sa HTML.

Mga praktikal na halimbawa gamit ang Text

Tingnan natin ang dalawang tipikal na senaryo ng paggamit ng Text sa React Native: pag-format ng teksto gamit ang nesting at paggawa ng naki-click na sangkap na may limitasyon ng linya.

Halimbawa 1: kard ng balita na may format

Sa halimbawang ito, ginagamit ang Text para sa pagpapakita ng multi-line na teksto na may naka-highlight na mga elemento: pamagat, petsa at nilalaman na may 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>
);

Sa estrukturang ito mayroong tatlong independiyenteng sangkap na Text (pamagat, petsa, nilalaman), bawat isa ay may kanya-kanyang estilo. Sa loob ng Text na may nilalaman ay may isa pang Text na may onPress para sa link. Ang pattern na ito ay ginagamit para sa mga news feed, blog at komento.

Halimbawa 2: teksto na may limitasyon ng linya

Para sa pagpapakita ng preview ng teksto na may elipsis, ginagamit ang numberOfLines. Ito ay isang karaniwang pattern para sa mga kard ng produkto at artikulo sa mga listahan.

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

Ang katangiang numberOfLines = 2 ay naglilimita ng teksto sa dalawang linya. Kung mas mahaba ang teksto, awtomatikong nagdaragdag ang React Native ng elipsis sa dulo ng ikalawang linya. Ang parameter na ellipsizeMode: 'tail' ay nagpapahiwatig na ang elipsis ay dapat nasa dulo (available din ang head, middle, clip).