Text: bu nədir, mətn göstərilməsi və React Native

React Native-də Text nədir

Text mətn məzmununu göstərmək üçün React Native komponentidir. Veb inkişafından fərqli olaraq, burada mətn üçün çoxsaylı semantik teqlər mövcud ikən, React Native-də bütün mətn elementləri Text vasitəsilə yaradılır. Komponent həm sadə mətni, həm də iç-içə Text və stilləşdirilmiş fraqmentlərlə mürəkkəb strukturları göstərə bilər.

Text avtomatik olaraq sətir qaytarılmasını idarə edir, şrift növünü, ölçüsünü, rəngini və düzlənməsini tənzimləyir. Komponent toxunma hadisələrini (onPress) dəstəkləyir ki, bu da əlavə bükücülər olmadan kliklənən keçidlər yaratmağa imkan verir. Vacib məhdudiyyət: Text-i birbaşa View-ə yerləşdirmək olmaz — yalnız digər Text komponentlərinə və ya birbaşa məzmun kimi.

React Native Nested Text, 2024-ə görə, iç-içə Text komponentləri stilləri valideyndən miras alır. Bu, yuxarı səviyyədə əsas stil təyin etməyə və konkret fraqmentlər üçün ayrı-ayrı xassələri dəyişdirməyə imkan verir — vebdə CSS ilə span-ın işləməsinə bənzər.

Text komponentinin xassələri və API

Text komponenti göstərilməni, davranışı və əlçatanlığı idarə etmək üçün bir sıra xassələr təqdim edir. Əsas kateqoriyalar: stil xassələri (şrift, ölçü, rəng, düzlənmə), göstərilmə xassələri (numberOfLines, lineBreakMode) və interaktiv xassələr (onPress, onLongPress).

Mətn göstərilmə xassələri

numberOfLines göstərilən sətirlərin sayını məhdudlaşdırır, sonunda üç nöqtə əlavə edir. ellipsizeMode üç nöqtənin yerini idarə edir (head, middle, tail, clip). adjustsFontSizeToFit mətnin verilən çərçivəyə sığması üçün şrift ölçüsünü avtomatik kiçildir. lineBreakMode numberOfLines-dan kənar mətnin necə kəsiləcəyini müəyyən edir.

İnteraktiv xassələr

Text toxunmaları idarə etmək üçün onPress və onLongPress dəstəkləyir. Bu, TouchableOpacity istifadə etmədən mətn keçidləri yaratmağa imkan verir. onTextLayout renderdən sonra mətnin yerləşməsi haqqında məlumat qaytarır — animasiyalar və mövqeləndirmə üçün faydalıdır.

Platforma xassələri

iOS-da disabled (mətni söndürür), selectable (seçməni aktiv edir), dataDetectorTypes (keçidlərin, telefonların, ünvanların avtomatik tanınması) mövcuddur. Android-də selectable (textSelectable vasitəsilə), includeFontPadding (artıq boşluqları silir) mövcuddur.

Text-in HTML p və span elementlərindən fərqləri

Text vizual olaraq HTML p və span teqlərinə bənzəsə də, memarlıq fərqləri əhəmiyyətlidir. React Native-də semantik mətn elementləri ilə DOM modeli yoxdur — bütün mətn qovşaqları müxtəlif xassələrlə vahid Text komponenti vasitəsilə idarə olunur.

Əsas fərq — Text-in iç-içə yerləşdirilməsi ilə stillərin miras alınması. Xarici Text-in fontSize: 18 və color: blue varsa, bütün iç-içə Text-lər bu stilləri miras alır. Daxili Text-də istənilən xassəni konkret dəyər verməklə dəyişdirmək olar. Bu, koda qənaət edir və strukturu daha təmiz edir.

Mətn stilləşdirməsi və şriftlər

Text Tipoqrafiya üçün CSS xassələrinin əksəriyyətini dəstəkləyir: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. React Native-də şriftlər @font-face vasitəsilə deyil, platforma səviyyəsində qoşulur.

Xüsusi şriftlərin qoşulması

Xüsusi şriftlərdən istifadə etmək üçün onları assets/fonts qovluğuna əlavə etmək və react-native.config.js-də göstərmək lazımdır. Tətbiq yenidən qurulduqdan sonra şrift fontFamily vasitəsilə əlçatan olur. React Native veb-şriftləri (Google Fonts) birbaşa dəstəkləmir — .ttf və ya .otf fayllarının yüklənməsi tələb olunur.

Stil miras alınması və kaskad

Text-də miras alma mexanizmi CSS-dən fərqlənir. Stillər yalnız Text-dən iç-içə Text-ə ötürülür, View-dən Text-ə ötürülmür. Bütün tətbiq üçün şrift təyin etmək lazımdırsa, Text komponentinin defaultProps-undan və ya xüsusi bükücü komponentdən istifadə olunur.

<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 nümunədə xarici Text fontSize: 18 və color: #333 təyin edir. Daxili Text fontSize-i (18) miras alır, lakin fontWeight-u bold-a və color-u #007AFF-ə dəyişir. Xarici Text yalnız öz stillərini miras alır. Bu, HTML-də iç-içə span-ın işləməsinin dəqiq analogiyasıdır.

Text ilə praktik nümunələr

React Native-də Text istifadəsinin iki tipik ssenarisini nəzərdən keçirək: iç-içə yerləşdirmə ilə mətn formatlaşdırılması və sətir məhdudiyyəti ilə kliklənən komponentin yaradılması.

Nümunə 1: formatlaşdırma ilə xəbər kartı

Bu nümunədə Text vurğulanmış elementlərlə çoxsətirli mətn göstərmək üçün istifadə olunur: başlıq, tarix və keçidli məzmun.

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 struktuda hər biri öz stilinə malik üç müstəqil Text komponenti (başlıq, tarix, məzmun) var. Məzmunlu Text-in içərisində keçid üçün onPress ilə başqa bir Text yerləşdirilib. Belə nümunə xəbər lentlərində, bloqlarda və şərhlərdə istifadə olunur.

Nümunə 2: sətir məhdudiyyəti ilə mətn

Üç nöqtə ilə mətn önizləməsi göstərmək üçün numberOfLines istifadə olunur. Bu, siyahılardakı məhsul kartları və məqalələr üçün standart nümunədir.

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

numberOfLines = 2 xassəsi mətni iki sətirlə məhdudlaşdırır. Mətn daha uzundursa, React Native avtomatik olaraq ikinci sətrin sonunda üç nöqtə əlavə edir. ellipsizeMode: 'tail' parametri üç nöqtənin sonda olmasını göstərir (head, middle, clip da mövcuddur).