React Native Öğreniyorum Bölüm 2–1

Bu bölüm 5–6 seri şekilde gelecek diye düşünüyorum. Öncelikle React Navite Componentlerini ve kullanım şekilleri üzerinde durmak istiyorum. Diğer bölümlerde proje üzerinden ilerlemeyi düşünüyorum.

Bu bölümümüzde React native View ve Image Componentlerini göstereceğim.

React Native View Kullanımı

View kullanımına örnek olması için basit bir şekilde bir şablon oluşturdum. Burada <View /> react native’de “container” demektir.
Yukarıdaki kod parçasında view içinde view kullanarak Container içinde 3 farklı daha container oluşturdum. Burda en dıştaki
<View style={{width: ‘100%’, height: ‘100%’}}> bizim için sayfamızın genişlik ve yükseklik değerini ifade etmektedir.

Diğer tanımlamış olduğumuz <View />’ler ise ana Container içindeki alanları göstermektedir.

flex değeri ne kadar küçük olursa kaplayacağı alan o kadar küçülür. ( Genellikle bir uygulamada ekran 6 eşit parçaya bölünerek ilerlenmesi önerilir. )

React Native Image Kullanımı

Image Componentini react-native’e import ediyoruz.

Image componentini kullanırken resim kaynağını source olarak vermemiz gerekiyor. Yukarıdaki kod parçacığında görüldüğü üzere source olarak verdiğimizde uri olarak bizden link istemektedir. Ben linki Google’dan aldım.
View içinde Image componentini ortalamak için view’e alignItems ve justifyContent center olarak tanımladım. Ayrıetten Image boyutunu ayarlamak için witdth: 300 ve height: 200 olarak değer girdim. Bunların yanında px, vh , vw veya rem gibi değerlerin olmaması önemli değil yukarıdaki gibi tanımladığımızda bunlar “px” olarak tanımlanır.

Son olarakta görselin uygulamada nasıl göründüğüne bakalım.

Buraya kadar okuduysanız teşekkür ederim. Bölüm 2 biraz uzun olacak gibi gözüküyor. Bu nedenle Bölüm 2 — Bölüm 2.1 olarak güncellenmiştir.