07-React Native Ana Bileşenleri: Text

Bir önceki yazıda view bileşenimizi ele almıştık. Şimdi ise bir diğer olmazsa olmaz ana bileşenimiz olan text’i ele alacağız.

Text Bileşeni

Adı üstünde olduğu gibi text, aplikasyonumuzda yer alan yazıları göstermemizi sağlayan bir bileşendir. Text bileşeni iç içe geçebilir, CSS ile şekil alabilir ve kullanıcı hareketlerine cevap verebilir özelliktedir. Ayrıca geliştirme yaptığımız platforma bağlı olarak React Native, text bileşenini hedeflenen platforma bağlı olarak uyumlu hale getirir. Bu konudan daha önceden bahsetmiştik. Mesela web ortamı için text bileşeni p etiketine çevriliyordu. Ne demek istediğimi daha iyi anlatabilmek için VS Code’a geri dönelim.

En son App.js dosyamızın içeriği şu şekildeydi:

import { View } from "react-native";

export default function App() {
  return (
    <View style={{ backgroundColor: "beige", flex: 1 }}>
      <View style={{ height: 250, width: 250, backgroundColor: "red" }}></View>
    </View>
  );
}

Şimdi child View’ü silelim ve içine istediğimiz bir metni yazalım. Ben “React Native öğreniyoruz” metnini parent View’ün içine gireceğim. Aşağıdaki gibi:

import { View } from "react-native";

export default function App() {
  return (
    <View style={{ backgroundColor: "beige", flex: 1 }}>
      React Native öğreniyoruz
    </View>
  );
}

Bu şekilde yapıp kaydettiğimizde sanal Android cihazımızda bir hata karşımıza çıkacak. Hata aşağıdaki görseldeki gibi olacak.

Bunun sebebi metinlerimizi her zaman text bileşeni içinde yazmamız gerektiğindendir. React Native text bileşeni içinde yazılmayan metinleri algılayamıyor. Bu da hata olarak karşımıza çıkıyor. Şimdi text bileşenini önce import edip metnimizi aşağıdaki gibi düzenleyelim.

import { View, Text } from "react-native";

export default function App() {
  return (
    <View style={{ backgroundColor: "beige", flex: 1 }}>
      <Text>React Native öğreniyoruz</Text>
    </View>
  );
}

Bu şekilde yapıp kaydettikten sonra sanal cihazımızda yazı, en üst tarafta görülüyor olmalıdır. Tabi henüz stil/düzen vermediğimiz için yazı biraz absürt görülebilir. Aşağıdaki görseldeki gibi bir sonuç elde etmiş olmalısınız.

Şimdi bu garip görüntüyü ortadan kaldırmak için CSS’den aşina olduğumuz margin-top özelliğini kullanalım. Margin-top değeri bir öğeyi üstten aşağıya doğru itmeye yarıyordu. Margin-top değerini vermek için inline stilin içerisine marginTop: 25 değerini yazalım. Bu, daha önceki derste oluşturduğumuz View bileşenini yukarıdan 25px aşağıya doğru itecektir. Kod aşağıdaki gibi olmalıdır.

  <View style={{ backgroundColor: "beige", flex: 1, marginTop: 25 }}>
      <Text>React Native öğreniyoruz</Text>
    </View>

Fark ettiyseniz web geliştirmedeki gibi margin-top olarak yazmıyoruz. React’te/React Native’de stil özelliklerini yazarken camel case kullanırız. Yani marginTop örneğinde olduğu gibi ilk kelimeyi küçük harfle başlatıp ikinci kelimede büyük harf kullanırız. Bu değişikliği yaptıktan sonra emülatörümüze geri döndüğümüzde aşağıdaki sonuçla karşılaşıyoruz.

Gördüğünüz gibi yazımız 25 px aşağıya kaydı ve şimdi çok daha güzel gözüküyor.

İç İçe Geçmiş Text Bileşenleri

Text bileşenleri iç içe kullanmamız mümkün. Bunu yapabilmek için istediğimiz metni başka bir text bileşeni içinde kullanmamız yeterli. Şimdi kodumuzu aşağıdaki gibi düzenleyelim.

import { View, Text } from "react-native";

export default function App() {
  return (
    <View style={{ backgroundColor: "beige", flex: 1, marginTop: 25 }}>
      <Text>
        <Text style={{ fontWeight: "bold", color: "red" }}>React Native</Text>{" "}
        öğreniyoruz
      </Text>
    </View>
  );
}

Gördüğünüz gibi “React Native öğreniyoruz” ifadesindeki React Native kısmını başka bir text içinde kullandık ve bu texte stil verdik. Bu değişikliği yaptıktan sonra ön izlememiz aşağıdaki gibi olacaktır.

{” “} ifadesini eklemek zorundayız çünkü React Native’de iç içe geçmiş bileşenlerde otomatik boşluk eklenmiyor. Yani React Native kelimelerinden sonra eğer bir boşluk olmasını istiyorsak, {” “} ifadesini kullanmak zorundayız.

---

SONUÇ

Bu kısa dersimizde basitçe text bileşeninin ne işe yaradığından ve nasıl kullanıldığından bahsettik. Çok kompleks bir şey değil zaten. Uygulamamıza metin basmak için text bileşenini kullanırız. Bu kadar. 😀

Bir sonraki yazıda başka bir temel bileşen olan Imageden bahsedeceğim. Şimdilik görüşmek üzere. İyi çalışmalar.