22 Mayıs 2020

React-Native 4 – View ve Flex box yapısı

ile Turan Yunus

Arkadaşlar selam, 

View bizim html ‘de kullanıdımız div ile hemen hemen aynı işlemleri yapmaktadır. 

Flex yapısı benim için react-native ortamında style işleri ile uğraşan biri için öğrenilmesi gereken en önemli konulardan biridir.

Hayatımıza girmesi ile beraber esnek yapı kurmak istediğimizde bizim işimizi kolaylaştırmıştır.

  • flex: bulunduğu alanı paylaşılmasını ve düzeninin boyutlarını gösterir. Flex:1  dersek kullanıldığı view o anki alanının tamamını kaplar
  • flexDirection ->  Flex yönünü belirler. 
    • “column” bileşenleri dikey olarak hizalandırır.
    • “row” bileşenleri yatay olarak hizalandır. 
  • justifyContent -> Bölüm içerisindeki alanların birbirleriyle olan konumlarını belirtmek için justifyContent kullanırız.
    • flex-start : bulunduğu alanının [0,0] alanından hizalanmaya başlar
    • center : bulunduğu alanı zorlar
    • flex-end : start’ın tam tersi bulunduğu alanın en son noktasından hizalamaya başlar.
  • alignItems -> Bölüm içerisindeki alanların konumlarını belirtmek için alignItems kullanırız.
    • flex-start : bulunduğu alanının [0,0] alanından hizalanmaya başlar
    • center : bulunduğu alanı zorlar
    • flex-end : start’ın tam tersi bulunduğu alanın en son noktasından hizalamaya başlar.

<View id=‘bir’ style={{flex:1}}> 

   <View id=‘iki’ style={{flex:1}}  /> 

  <View id=‘uc’ style={{flex:1}}  /> 

 </View>

 id=‘bir’ -> 2 view’ı kaplayan view’a flex:1 dedim bulunduğu tüm alanı kapladı.

 id=‘uc’  ve id=‘iki’ bulunduğu alanı  yarı yarıya kardeşçe paylaşırlar

Bu konuyu ile ilgili daha önceden çekmiş oldugum video’yu ise size altta paylaşıyorum.