Temel Bileşenler
React Native ile uygulama geliştirme temel olarak kullandığımız bileşenler vardır. Bunları kısaca açıklayalım.
View
En fazla kullanılan bileşendir. Hatta en temel bileşen de diyebiliriz. Sayfadaki bileşenleri içerisinde barındırmaktadır. Bir alanın toplu olarak tanımlanmasını sağlar.
View bileşenenin birçok parametresi vardır. Bu parametrelerin birkaçına değineceğiz.
locationX
Dokunulan alanın X koordinat değeri
locationY
Dokunulan alanın Y koordinat değeri
touches
Bütün dokunmaların toplandığı array
Text
Sayfada yazı, metin göstermek için kullanılan bileşendir. StyleSheet ile fontu, tipi, şekli vs. değiştirilebilir. Ayrıca TouchableOpacity bileşeni ile tıklama işlemi de görebilir. Üsteki resim de Text bileşeni için de örnek mevcuttur.
Text bileşeninin bilinmesi gereken bir güzel özelliği de iç içe Text bileşenleri kullanılabilmektedir. Mesela ‘Ali ata bak.’ metninde her kelimeyi farklı renkte yapabilmek için bu özelliği kullanabiliriz.
Image
Sayfada resim göstermek istediğimizde kullanacağımız bileşendir. Image bileşeninin kaynağını internetten, statik kaynaklardan (resources), cihaz klasörlerinden, sabit dosya içerisinden sağlayabiliriz.
Uygulama içerisinde kullanılan resimler fazla ise uygulamanın boyutunun daha az büyümesi için .png yerine .webp uzantılı resimler kullanabilirsiniz. .webp desteği iOS için default olarak gelirken android için ufak birkaç eklenti yapmanız gerekmektedir. Proje klasörünün altındakı android/app/build.gradle dosyasını açarak aşağıdaki kodu eklememiz yeterli olacaktır.
compile ‘com.facebook.fresco:webpsupport:1.9.0’
Eğer animasyon olabilecek bir resim ekleme durumunuz varsa aşağıdaki eklentiyi de aynı alana eklemeniz gerekmektedir.
compile ‘com.facebook.fresco:animated-webp:1.9.0’
TextInput
Kullanıcıdan bir bilgi girilmesi istendiğinde mesela login ekranında kullanıcı adı ve şifre bilgisi girilmesi gerektiğinde TextInput bileşenini kullanırız. TextInput bileşeni normal bir metin olabileceği gibi şifre alanı olarak da kullanılabilir. Ayrıca bu alanın maksimum karakter sayısı, satır sayısı bilgileri de belirtilebilmektedir.
TextInput bileşeninin onChangeText() adında bir fonksiyonu bulunmaktadır. Bu fonksiyon TextInput alanında yapılan herhangi bir değişiklikte tetiklenmektedir. Yapılacak her değişiklikte bir işlem yapmak istersen bu fonksiyonun içeriğini doldurabiliriz.
Alttaki örnekte bir kullanıcı adı giriş alanı yaptık. Burada yapılan her değişiklikte state içerisindeki username değişkeni güncellenecektir. value alanında da username değişkeninin değeri yer alacaktır. placeHolder parametresinde ise TextInput alanı boş iken alana girilmesi gereken hakkında bir ipucu yer alacaktır. Biz buraya Username yazdık.
ScrollView
Oluşturacağımız bir alan sayfaya sığmıyorsa ya da belirli bir alan ile kısıtlamak istiyorsak bu alanı ScrollView bileşeninin içerisine alarak aşağı yukarı yaparak bütün değerleri görebiliriz.
ScrollView bileşeni ile bir liste gösterebiliriz. Fakat akıllara doğal olarak FlatList ile ne farkı var o zaman gelebilir. Fark şudur ki ScrollView ile liste göstermek daha kolay bir şekilde yapılabilmektedir. Liste sadece gösterilecek ise ve uygulama küçük boyutlu ise kullanmak daha doğru olabilir. Ancak ikisi kıyaslar isek ScrollView ile liste göstermek FlatList bileşenine göre hem daha yavaştır hem de hafızada daha fazla alan tutacaktır. Bu sebeple liste üzerinde aksiyona geçilecek bir durum var ise FlatList kullanmak çok büyük fayda sağlayacaktır.
StyleSheet
Bu konuyu Style (Ekran Tasarımı) yazısında inceleyebilirsiniz.
Teşekkürler.
