React Native: Flexbox ve FlexDirection Kullanımı

Flexbox ile farklı ekran ölçülerine uygun tasarımlar oluşturmamız kolaylaşır. FlexDirection, Flex, Row ve Column yapıları kullanılarak daha düzenli tasarımlar oluşturabiliyoruz.

FlexDirection Özelliği

FlexDirection özelliği row olarak tanımlandığında, ilgili css değişkeninin kullanıldığı alan bir satır olarak kabul edilir ve içerisindeki bileşenler yan yana dizilerek sütun özelliği kazanır. FlexDirection column olarak tanımlandığında ise, altındaki bileşenler de satır olarak kabul edilir ve alt alta dizilir. Tanımlanmadığında default olarak column kabul edilir.

Flex Özelliği

Stil değişkeni içerisinde yapacağınız flex:1 tanımlaması, ilgili bileşenin enine ve boyuna bütün sınırlarını kullanması anlamına gelir. Yani tam genişlik ve tam yükseklik.

Fakat şağıdaki örnekte göreceğiniz üzere, container için de box için de flex özelliği 1 olarak verilmiş. Fakat container başka bir parent component içerisinde olmadığı için, ekranın tamamını kaplamış, box ise eşit bir biçimde alanını 4’e bölmüş.

Flex özelliği için boyutlandırma hesaplarken, aynı parent view içinde bulunan flexlerin değerleri toplanır. Örneğin 2 adet flex:1, 3 adet flex 2 var ise; toplam flex değerleri 8 yapar. Bu 8’i alanın tamamı olarak kabul ederiz ve alanı 8’e böldüğümüzü düşünürsek, 2 adet 1 parça, 3 adet de 2 parçalı alan oluşmuş oluyor.

bigBox stil değişkenini kullanan bileşene baktığınızda, flex:1 kullanan box değişkenli bileşenin yüksekliği diğerlerinin 2 katı olduğunu görüntülersiniz. Eğer container flexDirection özelliği row olarak tanımlanmış olsaydı, genişliği bakımından 2 katı olacaktı.