React Native Basit Style Tanımlama

React-Native de tanımladığımız bir objeye bir style tanımlama işlemini en kolay nasıl yaparız size basit bir örnekle bunu göstericem.Şimdi standart text ekrana basalım.

Projeyi ilk oluşturduğumuzda ki styless kısmına bakalım.Şimdi bu text’e bir style ataması yapmamız lazım.

Önce bir font size belirleyelim .Bunun için önce styles kısmına tıpkı bir değişken tanımlar gibi bir style objesi tanımlıyorum ve ismine sago diyorum.Arında artık ne istersen onu tanımlıyorum burada önce font Size belirledim. Ayrıca da yazıyı’da ortalamam lazım:

Şimdi bu oluşturduğumuz style değişkenini text objeme bağlama vakti şimdi bağlayınca yaptığımız değişiklikleri görebiliriz:

  • Şimdi birde üst taraftan 50 piksel boşluk bırakalım ki düzgün gözüksün.
  • Bir de renk tanımlayalım .Renkleri tanımlamakta özgürüz ben rgb değerleri ile tanımladım.Sizler isterseniz direk renk ile de tanımayabilirsiniz (color:’red’,) gibi.

Birden Fazla Stil (Stil Ortak Kullanımı)

Şimdi diyelim ki 2 tane text objemiz olsun.

  • 2. text tanımladım ve style içinde albüm adında bir style değişkeni yaptım.
  • 1. text içeriğim ile bazı özellikler aynı olduğu için tekrar tekrar onu ayarlamak ile uğraşmadım .Tek farklılık paddingLeft degerim olduğu için dizi mantısı ile işlem sağladım.
  • [styles.sago, styles.album] ile sago style değişkenimin tüm özelliklerini aldı ve farklılık olarak albüme özel style ayarını da ekledim.

Böylelikle ortak özellikler için tekrar aynı olan şeyleri tekrar tanımlamadım.İsteseniz bu şekilde kullanabilirsiniz.

2. Yöntem İle style Tanımlama

  • StyleSheet içersinde bir değişken tanımlamak zorunda değilim.
  • Herhangi bir kompanent’i tanımlarken direkt olarak style özelliklerini ekleyebilirim.
  • Gördüğümüz gibi herhangi bir değişken olmadan direk komponent içinde özellikleri tanımladım.

Kodlarınıza taş değmesin!;

Leave a Reply

*