React native ile uygulama geliştirirken View component ini çok sıklıkla kullanırız çünkü bu component öğeleri gruplandırmak ve ekrandaki yerleşim alanlarını belirlemek için kullanılır
View componenti ile ekrana eklenecek diğer buton text gibi bileşenlerin tüm ekranlarda sorunsuz olarak doğru yerde konumlandırması için hayati öneme sahiptir , View i HTML deki DİV etiketine benzetebiliriz.
öncelikle View componentimizi import edelim .
import {View} from 'react-native'
sonrasında render methodumuza ekleyelim
render(){
return(
<View
style={{flexDirection:'row'}}
>
</View>
)
}
React Native View Componentinin içerisindeki componentlerin ekrandaki gösterimini yani yan yana mı yoksa alt alta mı gösterilmesini istediğimiz zaman flexDirection kullanırız eğer ‘row‘ alırsa değer olarak yan yana gösterilir column alırsa alt alta gösterilir. Diğer bir style komutu ise justifyContent ve alignItems dir bunlar sayesinde view içerisinde bulunan componentlerin ortalansın mı yoksa biri sonra biri başta mı dursun vertical ve horizontal olarak belirleyebiliriz. justifyContent => vertival , alignItems => horizantal olarak belirlenmesi için kullanılır.
Diğer bir önemli prop ise onLayout prop udur, bu prop içerisine verdiğimiz method view ekranda belirdiği anda tetiklenir ve view in width ve height değerlerine o anda erişebiliriz bu sayede oyun geliştirirken yada sayfa alta indiğinde işlem gerçekleştirilir.