05.01. Ön Hazırlık

Bu bölümde sistematik bir yapıya geçeceğim. Özellikle navigasyon konusuna geçmeden önce bu tür yapılar kurmanızda yarar olacaktır.

Öncelikle ikinci bölümde anlatıldığı şekilde bir proje oluşturup çalıştıralım. Aşağıdaki adımları teker teker uygulayalım:

  • Projemizin oluştuğu klasöre “scr” adında bir klasör oluşturalım.
  • “scr” klasörü içine “components” ve “styles” adında iki klasör oluşturalım. “components” klasörü bileşenleri kodlayacağımız bölüm iken “styles” ise genel style değerlerinin tutulduğu dosyaları içerecektir.
  • “styles” klasörü altına global.js dosyasını oluşturup aşağıdaki şekilde bir yapı kuralım.

Öncelikle react-native’in StyleSheet bileşenini import ettik. Bu sayede StyleSheet.create fonksiyonunu kullanılabildik. Her const ifadesinin başına dışarıdan kullanılabilmesi için export ifadesini kullanıldı.

  • “basic” klasörüne 01.js dosyasını oluşturup, aşağıdaki kodları yazalım.

container Style verilerini styles klasöründeki global.js dosyası içine attık. Ardından import ile bu dosyadan bilgileri çektik. Bu tür bir yapı kuduğumuzda tek değişiklikle tüm container style’ları değiştirme şansımız vardır. İyi bir klasör yapısı sayesinde uygulamanızdaki güncelleştirmeleri çok daha hızlı bir şekilde yapacağınızı unutmayın.  Sistematik kod yazma alışkanlığı kazanmak içinde bol bol kod yazmanızı öneririm.

  • En son aşama, kök dizindeki index.js’e çalıştırmak istediğimiz dosyanın yolunu verip register etmekten geçiyor. Örneğin,

AppRegistry sayesinde uygulamanızı yükledik. App rn01.js dosyasındaki sınıfın ismidir. appName, app.json dosyasından projenin ismini alınıyoruz. Bu işlemi programızın main bölümü olarak düşünebiliriz.