02.08. Merhaba React Native Kodlarını Anlama

Bu bölümde terminal üzerinden komutlarla oluşturduğumuz temel dosyalar üzerinedir.

package.json dosyası: Uygulama ismi, versiyonu, bağımlıkları ve geliştirme bağımlılıkları gibi bilgileri içerir. Burada kullanılan bağımlılığın versiyonu önemlidir. Eğer ileri de ek bir bağımlılığa ihtiyaç duyarsanız, buradan bağımlılığı belirtmeyi unutmayın. Örnek bir package.json dosyası:

app.js dosyası: Programın emulator üzerinde görülen kısımlarının kodunu içeren dosyadır. Bu dosyanın ilk satırları ES6 import satırlarını içerir.

Bir uygulama çalıştığı zaman node_modules klasöründen import edilen kısımları bulup React Native Packager’a sunar. Bir React bileşini yaratmak için ilk import satırı olmalıdır. Bu satırda React paketi içinden React ve Component alınan (export) değerlerdir. React geçerli alımdır. Süslü parantezler arasındaki alınan diğer değerler (Component gibi) alınır. İkinci satırda alınan tüm değerler React Native-spesifik değerlerdir.  Şimdi kodumuzun diğer satırlarını kısaca açıklayalım.

instructions değişkeni platforma göre yazılan bir değişkendir. Platformun IOS veya Android olmasına göre farklılıklar gösterir. Bu değişken App sınıfı içindeki {instructions} satırlarında çağrılır. App sınıfı tüm platformlarca kullanılan bir sınıftır. “export default” geçerli çalışma sınıfı olduğu anlamına gelir ve uygulama çalıştığında il bu sınıfa bakar. (Main gibi düşünebiliriz.) Bu sınıf Component özelliklerini miras alır ve boş bir Props değerine sahiptir. Burada render metodu oluşacak çıktıyı üretir. View ve Text React Native için özel component’ler (bileşenler)dir. En son bölüm style bilgilerini içerir.

Style bölümü isminden de anlaşılacağı gibi componentlerin style ve layout bilgilerini tutar. App sınıfı içinden “style={styles.welcome}” şeklinde component’in style değeri set edilebilir. Aslında web ortamında HTML ve CSS ilişkisine çok benzer bir ilişki mevcuttur.

İleri ki bölümlerde bu konular daha geniş şekilde işlenecektir.

index.js dosyası: Aslında bakılan ilk dosyadır ve app.js sınıfı bu dosya içinde sisteme eklenir. Sisteme eklemek için:

AppRegistry, “react-native” içinde bir özelliktir. İkinci satırda App.js dosyası bağlanır. Üçüncü satırda app.json dosyasında name değeri çekilir. app.json dosyası:

Buradaki name değerini aldık. AppRegistry içindeki registerComponent üzerinden proje ismi ve App dosyası register edilir. Burada, Bu metod içinde “(” silip eklediğinizde veya “,” silip eklediğinizde parantez arasına yazılacak değerler hakkında bilgi edinebilirsiniz. getComponentFunc: componentProvider bir fonksiyon türünden bilgi istemektedir. Bu yüzden “() => App” şeklinde bir tanım yapılmıştır. Bu tür özellikleri daha iyi anlamamız için üçüncü konu ES6 üzerinedir.