Style (Ekran Tasarımı)

Geliştirdiğimiz uygulamalar ne kadar önemli, büyük olursa olsun uygulamanın görselliğinin çok dikkatli ve özenli hazırlanması en dikkat edilmesi gereken hususlardan bir tanesidir. Uygulamalar görünüşüne göre indirilir, işlevine göre kullanılır diyelim 🙂

Uygulama sayfalarında View, Text, Button, List ve buna benzer yapılar ile şablonumuzu oluştururuz. Bunlara renk, konum, yazı boyutu gibi değerli incelikleri de ekleyerek görselliği tamamlayabiliriz. Işte bu işlemleri StyleSheet modülü ile gerçekleştirebiliyoruz.

StyleSheet modülü react-native modüllerindendir. Bunu üst taraflarda bir yerde import ederek kullanıma açabiliriz. Kullanıma açılan modülü de bir değişkene atayarak ekranımızın bölümlerine yerleştirebiliriz.

Örnek olarak bir StyleSheet yapısında style değişkeni oluşturalım. Bu değişkenimizin içerisinde de çeşitli tanımlar olsun. Bunları da farklı bölümlerde kullanalım.

Birinci sayfamız tam ekran ve arka plan rengi pembe olsun. Bir tane genişliği 20, arka planı kırmızı, fontu 10 olan text, bir tane de arka planı turuncu, fontu 14 ve sağa yaslı olan text olsun.

Ikinci sayfamız ise arka plan rengi yeşil olsun. Bir tane arka plan rengi sarı ve her yere 50 uzaklıkta text olsun. Bu iki sayfanın kodları ve ekran görüntüleri aşağıdaki gibidir.

Sayfadaki bölümlerde style kısımlarını ister yukarıdaki değişkenin içerisinden çekerek istersek de kullanacağımız bölümün style parametresinin içerisine yazarak da kullanabiliriz. Bu iki durumu aşağıdaki iki resimde görebilirsiniz.

 

Iki durum için de aşağıdaki ekranlar ortak olarak oluşacaktır.

 

Teşekkürler.