Text: nedir, metin görüntüleme ve React Native

React Native'de Text Nedir

Text, metin içeriğini görüntülemek için bir React Native bileşenidir. Web geliştirmede metin için birçok anlamsal etiket bulunurken, React Native'de tüm metin öğeleri Text aracılığıyla oluşturulur. Bileşen, hem basit metni hem de iç içe Text ve stilize edilmiş parçalarla karmaşık yapıları görüntüleyebilir.

Text otomatik olarak satır kaydırmayı işler, yazı tipi ailesini, boyutunu, rengini ve hizalamasını yönetir. Bileşen, dokunma olaylarını (onPress) destekleyerek ek sarmalayıcılar olmadan tıklanabilir bağlantılar oluşturmayı sağlar. Önemli bir sınırlama: Text, doğrudan View içinde iç içe geçirilemez — yalnızca diğer Text bileşenlerinin içinde veya doğrudan alt öğeler olarak.

React Native Nested Text, 2024'e göre, iç içe Text bileşenleri üst öğeden stilleri devralır. Bu, üst düzeyde bir temel stil belirlemeye ve belirli parçalar için ayrı özellikleri geçersiz kılmaya olanak tanır — web'de span'in CSS ile çalışmasına benzer.

Text Bileşeninin Özellikleri ve API'si

Text bileşeni, görüntüleme, davranış ve erişilebilirliği kontrol etmek için bir dizi prop sağlar. Ana kategoriler: stil propları (yazı tipi, boyut, renk, hizalama), görüntüleme propları (numberOfLines, lineBreakMode) ve etkileşimli proplar (onPress, onLongPress).

Metin Görüntüleme Propları

numberOfLines görüntülenen satır sayısını sınırlar ve sonuna üç nokta ekler. ellipsizeMode üç noktanın konumunu kontrol eder (head, middle, tail, clip). adjustsFontSizeToFit, metni belirlenen sınırlara sığdırmak için yazı tipi boyutunu otomatik olarak azaltır. lineBreakMode, numberOfLines'ın ötesindeki metnin nasıl kırpılacağını belirler.

Etkileşimli Proplar

Text, dokunmaları işlemek için onPress ve onLongPress'i destekler. Bu, TouchableOpacity kullanmadan metin bağlantıları oluşturmayı sağlar. onTextLayout, işleme sonrası metin düzeni hakkında bilgi döndürür — animasyonlar ve konumlandırma için kullanışlıdır.

Platforma Özgü Proplar

iOS'ta disabled (metni devre dışı bırakır), selectable (seçimi etkinleştirir), dataDetectorTypes (bağlantıları, telefonları, adresleri otomatik algılama) mevcuttur. Android'de selectable (textSelectable aracılığıyla) ve includeFontPadding (fazla dolguyu kaldırır) mevcuttur.

Text ile HTML'deki p ve span Öğeleri Arasındaki Farklar

Text görsel olarak HTML etiketleri p ve span'a benzese de, mimari farklılıklar önemlidir. React Native, anlamsal metin öğeleriyle bir DOM modeline sahip değildir — tüm metin düğümleri, çeşitli proplara sahip tek bir Text bileşeni aracılığıyla işlenir.

Temel fark, Text iç içe geçmesi yoluyla stil kalıtımıdır. Dıştaki Text'te fontSize: 18 ve color: blue varsa, iç içe geçmiş tüm Text bileşenleri bu stilleri devralır. Herhangi bir prop, içtekine belirli bir değer ayarlanarak geçersiz kılınabilir. Bu, koddan tasarruf sağlar ve yapıyı daha temiz tutar.

Metin Stilize Etme ve Yazı Tipleri

Text, tipografi için çoğu CSS özelliğini destekler: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. React Native'de yazı tipleri, @font-face aracılığıyla değil, platform düzeyinde bağlanır.

Özel Yazı Tipleri Kullanma

Özel yazı tiplerini kullanmak için, assets/fonts klasörüne eklenmeli ve react-native.config.js'de belirtilmelidir. Uygulama yeniden oluşturulduktan sonra, yazı tipi fontFamily aracılığıyla kullanılabilir hale gelir. React Native, web yazı tiplerini (Google Fonts) doğrudan desteklemez — .ttf veya .otf dosyalarının indirilmesi gerekir.

Stil Kalıtımı ve Basamak

Text'teki kalıtım mekanizması CSS'den farklıdır. Stiller yalnızca Text'ten iç içe Text'e iletilir, ancak View'den Text'e iletilmez. Tüm uygulama için bir yazı tipi ayarlamak için, Text bileşeninin defaultProps veya özel bir sarmalayıcı bileşen kullanılır.

<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 örnekte, dıştaki Text fontSize: 18 ve color: #333 ayarlar. İçteki Text, fontSize (18)'i devralır, ancak fontWeight'u bold ve color'ı #007AFF olarak geçersiz kılar. Dıştaki Text yalnızca kendi stillerini devralır. Bu, HTML'de iç içe span'in nasıl çalıştığının tam bir benzetmesidir.

Text ile Pratik Örnekler

React Native'de Text'in iki tipik kullanım durumuna bakalım: iç içe geçmeyle metin biçimlendirme ve satır sınırlamalı tıklanabilir bileşen oluşturma.

Örnek 1: biçimlendirmeli haber kartı

Bu örnekte Text, vurgulanmış öğelerle (başlık, tarih ve bağlantılı içerik) çok satırlı metin görüntülemek için kullanılır.

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 yapıda, her biri kendi stiline sahip üç bağımsız Text bileşeni (başlık, tarih, içerik) bulunur. İçerik Text'inin içinde, bağlantı için onPress olan başka bir Text iç içe geçmiştir. Bu desen haber akışları, bloglar ve yorumlar için kullanılır.

Örnek 2: satır sınırlamalı metin

Üç noktalı metin önizlemelerini görüntülemek için numberOfLines kullanılır. Bu, ürün kartları ve makale listeleri için standart bir desendir.

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

numberOfLines = 2 özelliği metni iki satırla sınırlar. Metin daha uzunsa, React Native otomatik olarak ikinci satırın sonuna üç nokta ekler. ellipsizeMode: 'tail' parametresi, üç noktanın sonda olması gerektiğini belirtir (head, middle ve clip de mevcuttur).