React Native’de sabit bir büyüklükte görünmesini istediğimiz nesnelerimize en ve boy vermek için width ve height kullanabiliriz.

        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

Değişen ekran tasarımlarına ayak uydurmak için flex ile tasarım yapmak daha cazip duruyor.

flex:1, dersek ekranda bir tane bileşen olur ve ekranı tamamen kaplar.

Aşağıdaki gibi bir kod kullanırsak:

<View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 1, backgroundColor: 'skyblue'}} />
        <View style={{flex: 1, backgroundColor: 'steelblue'}} />
      </View>

Görüntü:

şeklinde olacaktır.

Yani burada ana view tüm ekranı kaplarken, alttaki view’lar 3 eşit parçada ekranı bölüşmektedirler.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir