06-React Native Ana Bileşenleri: View

Geçtiğimiz bölümde React Native ana bileşenlerine genel bir bakış atmıştık. Kabaca View bileşeninden bahsetmiştik. Şimdi ise olmazsa olmaz React Native ana bileşeni olan View’dan daha detaylı bahsedelim. Bu arada React Native serisinin diğer derslerine ulaşmak için buraya tıklayabilirsiniz.

View Bileşeni

View bileşeni geçen derste de genel olarak bahsettiğimiz üzere kullanıcı arayüzleri oluşturmak için kullandığımız temel bir ana bileşendir. View’ü bir konteyner gibi düşünebiliriz. Tıpkı web geliştirmede kullandığımız div elementi gibi. Nasılsa div’e CSS kullanarak düzen ve şekil verebiliyorsak aynı koşullar view bileşeni için de geçerli.

Web geliştirmede div elementleri birbirleri içinde kullanılabiliyordu. Yani bir ana div ve hemen içinde de çocuk (child) div kullanabiliyorduk. Bu durum view bileşeni için de geçerli. İç içe geçmiş view bileşenleri kullanmak mümkün.

View bileşenini daha iyi anlayabilmek için projemize geri dönelim. Eğer projemizi bir şekilde kapattıysak proje klasörümüzde olduğumuzdan emin olduktan sonra VS Code terminalimizi açalım ve npm start komutunu girelim. Bir yandan da önceki derslerimizde kurulumunu yaptığımız Android Studio’yu ve Android emülatörümüzü açalım. Emülatör açıkken a tuşuna basalım. Artık projemiz emülatörümüzde görülmüş olmalıdır. (Oluşturduğumuz sanal Android cihazda projemiz açılacaktır.)

Şimdi, temiz bir başlangıç yapabilmek adına proje dizinimizde yer alan App.js dosyası içindeki her şeyi silelim.

Temiz bir App.js dosyası artık karşımızda. İşe önce View bileşenimizi React Native kütüphanesinden import etmekle başlayacağız. Çünkü bileşenlerimizi kullanmadan önce mutlaka React Native kütüphanesinden import etmemiz gerekiyor. App.js dosyamızın en başına aşağıdaki kodu yazalım.

import { View } from "react-native";

Fark ettiyseniz bileşenimizi import ederken süslü parantez içinde kullanıyoruz. React Native’den bileşen import etmenin kuralıdır bu. Bileşen ismini süslü parantez içinde yazarız ve React Native kütüphanesini hedeflerken de tüm harfleri küçük yazarak araya tire koyarız.

Bir sonraki adımda ana bileşenimiz olan App’i varsayılan olarak export etmemiz gerekiyor. Bunu yapmamızın nedeni App dosyamızın projemizde yer alan diğer dosyalar tarafından görülmesini sağlamak. Şimdi aşağıdaki kodu da ekleyelim.

export default function App() {

}

Burada default anahtar kelimesini kullandık farkındaysanız. Eğer bir dosyayı varsayılan olarak dışarı aktarmak istiyorsak default anahtar kelimesini kullanırız. Başka dosyada App bileşenimizi kullanmak için artık süslü parantez kullanmamıza gerek kalmaz. Yani App bileşenimizi/dosyamızı başka bir dosyadan içeri aktarırken şöyle yazarız: import App from ./App

Şimdi de oluşturduğumuz fonksiyonumuzun içinde return anahtar kelimesiyle View bileşenimizi döndürmemiz gerekiyor. Fonksiyonumuzun içine aşağıdaki kodu yazalım.

export default function App() {
  return (
    <View></View>
  );
}

View ana bileşenimiz hazır. View’ün içine bir şey yazmadan evvel çalışıyor mu diye test edelim. Bunun için basitçe satır içi (inline) css ekleyebiliriz. View etiketi içinde style prop’unu oluşturalım ve aşağıdaki stil kodlarını ekleyelim.

return <View style={{ backgroundColor: "beige" }}></View>;

Arka planı bej rengi yaptık. View uygulamamızın ana bileşeni, bir anlamda iskeleti. Bu yüzden beklenen sonuç uygulamamızın arka planının tamamının bej rengi olması yönünde. Ancak o da nesi! Arka planı ayarladığımız halde ön izlemeye baktığımızda hiçbir şey gözükmüyor. Bunun sebebi View’ün içinde hiçbir içerik olmamasıdır. Ancak içerik olmadan da arka planı bej yapabiliriz. Bunun için CSS’deki flex: 1 özelliğini kullanabiliriz. Bu özellik içerik olmasa bile stilin tüm uygulamayı kaplamasını sağlar. Şimdi flex: 1 özelliğini inline CSS’e ekleyelim. Aşağıdaki gibi.

return <View style={{ backgroundColor: "beige", flex: 1 }}></View>;

Şimdi sanal makinemize geri döndüğümüzde arka planın bej renginde olduğunu göreceksiniz.

İç İçe Geçmiş View Kullanımı

View’lar tıpkı birer div görevi görür demiştik. Yani kendilerine has bir çeşit konteynerdir. Nasılsa web geliştirmede divleri iç içe kullanabiliyorsak aynı şekilde Viewları da iç içe kullanabiliyoruz. Şimdi oluşturduğumuz ana Viewün içine başka bir View daha açalım ve bu Viewün stillerini aşağıdaki gibi değiştirelim.

   <View style={{ backgroundColor: "beige", flex: 1 }}>
      <View style={{ height: 250, width: 250, backgroundColor: "red" }}></View>
    </View>

Sanal makinemize dönüp baktığımızda ana Viewün içinde 250px genişliğinde ve 250px uzunluğunda kırmızı bir kutu göreceğiz. Aşağıdaki gibi.

Bu şekilde iç içe geçniş Viewları kullanarak karmaşık uygulamalar oluşturabiliriz. Şimdilik Viewün mantığını anlamamız yeterli olacaktır.

---

Bu derslik bu kadar. Bir sonraki dersimizde diğer bir temel bileşen olan Textten bahsedeceğiz. Şimdilik görüşmek üzere. İyi çalışmalar.