React Native |Flex Direction ve Flex Özelliği

Flex sistemi farklı ekran boyutlarına düzgün bir çıktı alabilmek için tasarlandı.

Flex

Flex ana eksenimiz boyunca kullanılabilir alan üzerinden öğelerin nasıl dolduracağını tanımlamak için kullanılır.Boşluk, her bir öğenin esnek özelliğine göre bölünecektir.

Şimdi bir Örnek:

  • 3 adet text yazıyorum:
  • Ardından Stil Tanımlamalarını yaptım.

Şuan bana gelen sonuç:

Benim bu öğrenimde anladığımız durum şu .Bu şekilde bir tanımla yaptığımız da yani View objemin içinde 3 adet text var .View objeme bir backroundColor verdiğimde kapladığı alanı daha net bir şekilde gördüm.Gördüğüm şey text sayısı ve boşluk değelerine göre View’ın kapladığı alan ortaya çıkıyor.Yani 2 adet daha text eklesem daha çok alan kırmızı olacak.

Şimdi buna bir de flex özelliğine kazandıralım:

  • Flex varsayıla olarak 0 geliyor ve biz onu 1 yaprak aslında açmış olduk gibi düşünebilirsiniz.Lakin sadece 1 verilmiyor bunu daha sonra göstereceğim.
  • 3 adet text objem, View nesnemin içinde yer aldığı için flex özelliğine View objeme verdim

Başka Bir Örnek

  • Şimdi 1 view objemin içine 3 adet daha View ekliyorum.
  • Önce Stil kodlamasını yapıyorum.
  • 3 view objemin ortak özelliği olan (width,height) için tek bir Style değişkeni yani myview oluşturdum.
  • Ardından 3 View için renk kodlarını içeren tanımlamları yaptım.
  • Flex:1 ile ana view objemi bütün ekrana uzattım.
  • FlexDirection:’row ‘ ile eklediğim viewları yanyana görmüş olduk.

Şuan ki durum bu şekilde:

FlexDirection

Yukarı örnekte row yani soldan sap tarafa doğru dizilimi görmüş olduk.FlexDirection bir düğümde ki objelerin yerleşitiriliği yönü kontrol eder.FlexDirection için 4 adet temel özellik vardır:

  • row : soldan sağ tarafa doğru hizalar.wrapping (sarma) etkin ise sonra ki satır kabın solunda ki ilk ögenin altında başlar.
  • column: (varsayılan değer) yukarıdan aşağıya hizalar.wrapping (sarma) etkin ise sonra ki satın kabın üstünde ki ilk öğenin sağından başlar.
  • row-reverse Objeleri sağdan sola hizalamak için kullanılır.Sarma etkinleştirilmişse, sonraki satır kabın sağındaki ilk öğenin altında başlayacaktır.

column-reverseÇocukları aşağıdan yukarıya doğru hizalayın. Sarma etkinleştirilmişse, sonraki satır, kabın altındaki ilk öğenin sağından başlayacaktır.

Kadoumuza taş değmesin;

Leave a Reply

*