Text: bu nima, matnni ko'rsatish va React Native

React Native-da Text nima

Text matn mazmunini ko'rsatish uchun React Native komponentidir. Veb-ishlanmasidan farqli o'laroq, matn uchun ko'plab semantik teglar mavjud bo'lgan joyda, React Native-da barcha matn elementlari Text orqali yaratiladi. Komponent oddiy matnni ham, ichma-ich Text va uslublangan qismlar bilan murakkab tuzilmalarni ham ko'rsatishi mumkin.

Text avtomatik satr qaytarishni boshqaradi, shrift turini, o'lchamini, rangini va tekislanishini nazorat qiladi. Komponent teginish hodisalarini (onPress) qo'llab-quvvatlaydi, bu qo'shimcha o'rovchilarsiz bosiladigan havolalar yaratishga imkon beradi. Muhim cheklash: Text-ni to'g'ridan-to'g'ri View-ga joylashtirib bo'lmaydi — faqat boshqa Text komponentlariga yoki to'g'ridan-to'g'ri mazmun sifatida.

React Native Nested Text, 2024 ga ko'ra, ichma-ich Text komponentlari uslublarni ota-onadan meros oladi. Bu yuqori darajada asosiy uslubni o'rnatish va alohida qismlar uchun ma'lum xususiyatlarni qayta belgilash imkonini beradi — vebda CSS bilan span ishlashiga o'xshab.

Text komponentining xususiyatlari va API

Text komponenti ko'rsatish, xatti-harakat va foydalanish imkoniyatini boshqarish uchun bir qator xususiyatlarni taqdim etadi. Asosiy kategoriyalar: uslub xususiyatlari (shrift, o'lcham, rang, tekislash), ko'rsatish xususiyatlari (numberOfLines, lineBreakMode) va interaktiv (onPress, onLongPress).

Matn ko'rsatish xususiyatlari

numberOfLines ko'rsatilgan satrlar sonini cheklaydi, oxiriga uch nuqta qo'shadi. ellipsizeMode uch nuqtaning joyini boshqaradi (head, middle, tail, clip). adjustsFontSizeToFit matn berilgan ramkaga sig'ishi uchun shrift o'lchamini avtomatik kichiklashtiradi. lineBreakMode numberOfLines dan tashqari matnni qanday kesishni belgilaydi.

Interaktiv xususiyatlar

Text teginishlarni boshqarish uchun onPress va onLongPress qo'llab-quvvatlaydi. Bu TouchableOpacity ishlatmasdan matn havolalarini yaratishga imkon beradi. onTextLayout renderdan keyin matn joylashuvi haqida ma'lumot qaytaradi — animatsiyalar va joylashtirish uchun foydali.

Platforma xususiyatlari

iOS da disabled (matnni o'chiradi), selectable (tanlashni yoqadi), dataDetectorTypes (havolalar, telefonlar, manzillarni avtomatik tanib olish) mavjud. Android da selectable (textSelectable orqali), includeFontPadding (ortiqcha bo'shliqlarni olib tashlaydi) mavjud.

Text-ning HTML p va span elementlaridan farqlari

Text vizual ravishda HTML p va span teglariga o'xshasa ham, arxitektura farqlari sezilarli. React Native-da semantik matn elementlari bilan DOM modeli yo'q — barcha matn tugunlari turli xususiyatlar bilan yagona Text komponenti orqali boshqariladi.

Asosiy farq — Text ichma-ich joylashtirish orqali uslublar merosi. Agar tashqi Text fontSize: 18 va color: blue bo'lsa, barcha ichma-ich Text'lar bu uslublarni meros oladi. Ichki Text'da istalgan xususiyatni aniq qiymat berib o'zgartirish mumkin. Bu kodni tejaydi va tuzilmani toza qiladi.

Matn uslublash va shriftlar

Text tipografiya uchun CSS xususiyatlarining aksariyatini qo'llab-quvvatlaydi: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. React Native-da shriftlar @font-face orqali emas, platforma darajasida ulanadi.

Maxsus shriftlarni ulash

Maxsus shriftlardan foydalanish uchun ularni assets/fonts papkasiga qo'shish va react-native.config.js da ko'rsatish kerak. Ilova qayta qurilgandan so'ng, shrift fontFamily orqali mavjud bo'ladi. React Native veb-shriftlarni (Google Fonts) to'g'ridan-to'g'ri qo'llab-quvvatlamaydi — .ttf yoki .otf fayllarini yuklab olish talab qilinadi.

Uslublar merosi va kaskad

Text dagi meros mexanizmi CSS dan farq qiladi. Uslublar faqat Text dan ichma-ich Text ga o'tadi, View dan Text ga o'tmaydi. Agar butun ilova uchun shrift o'rnatish kerak bo'lsa, Text komponentining defaultProps dan yoki maxsus o'rovchi komponentdan foydalaniladi.

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

Bu misolda tashqi Text fontSize: 18 va color: #333 o'rnatadi. Ichki Text fontSize (18) meros oladi, lekin fontWeight ni bold ga va color ni #007AFF ga o'zgartiradi. Tashqi Text faqat o'z uslublarini meros oladi. Bu HTML dagi ichma-ich span ishlashining aniq analogiyasidir.

Text bilan amaliy misollar

React Native da Text dan foydalanishning ikkita odatiy ssenariysini ko'rib chiqamiz: ichma-ich joylashtirish bilan matn formatlash va satr cheklovi bilan bosiladigan komponent yaratish.

Misol 1: formatlash bilan yangilik kartasi

Bu misolda Text ajratilgan elementlar bilan ko'p satrli matn ko'rsatish uchun ishlatiladi: sarlavha, sana va havola bilan mazmun.

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

Bu tuzilmada har biri o'z uslubiga ega uchta mustaqil Text komponenti (sarlavha, sana, mazmun) mavjud. Mazmunli Text ichida havola uchun onPress bilan yana bir Text joylashtirilgan. Bunday naqsh yangilik lentalari, bloglar va sharhlarda ishlatiladi.

Misol 2: satr cheklovi bilan matn

Uch nuqta bilan matn oldindan ko'rishni ko'rsatish uchun numberOfLines ishlatiladi. Bu ro'yxatlardagi mahsulot kartalari va maqolalar uchun standart naqshdir.

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

numberOfLines = 2 xususiyati matnni ikki satr bilan cheklaydi. Agar matn uzunroq bo'lsa, React Native avtomatik ikkinchi satr oxiriga uch nuqta qo'shadi. ellipsizeMode: 'tail' parametri uch nuqta oxirida bo'lishini ko'rsatadi (head, middle, clip ham mavjud).