04.01. Style yaratma ve uygulama

Öncelikle, 2. derse dönüp bir proje oluşturmayı hatırlayalım. Bu bölümde basitçe style yaratıp bunu bileşenler üzerinde uygulamasını yapacağız.

Bileşen içinde styling

CSS konusu akla gelince styling işlemini üç farklı şekilde yapabileceğimiz hatırlarsanız. Direkt HTML etiketi için style özelliğine değer atamaları yaparak görselleştirme yapabilirdik. Burada çok benzer bir yapı var. Örnek projemizi açalım ve gereksiz kodları silip aşağıdaki gibi bir kod yazalım.

Bu bölümde özellikle odaklanacağımız kısım bileşenler içindeki style bölümü olacaktır. View, Html’deki div ve Text, Html’deki span/label etiketlerini andırır. Etiket içindeki CSS kullanımı gibi backgroundColor, justifyContent, alignItems, color, fontSize gibi styling özelikleri ile görselleştirme yapılmıştır.

Şimdi, emulatörümüzün açık olduğundan ve terminal bölümünde proje klasöründe proje klasörünü gösterdiğinden emin olalım. Ardından aşağıdaki kodu çalıştıralım ve emulatörde sonuçları görelim.

Bu bölüm çok önemli, eğer bu bölümde bir sorun çıktı ise diğer adımlara kesinlikle geçmeyin.

 

 

Nesne olarak styling ve bileşene uygulama

CSS’te olduğu gibi etiket içine styling yapma çok tavsiye edeceğim bir konu değildir. Daha genel style kuralları tanımlayıp, bu kuralları kullanmak çok daha etkin bir çözümdür. Örneğin,

const ile tanımlanmış iki değişkene style özellikleri aktarılmıştır. View ve Text bileşenlerinin style özelliğine “{…}” arasına tanımlanmış değişken isimleri aktarılmıştır. HTML etiketleri üzerinde benzer işlemi “class” veya “id” üzerinden aktarıyorduk. Burada style özelliği her iki örnekte kullanıldığını gördük.

* Not: Bundan sonraki kodlara import, type gibi her bölümde tekrarlayan kısımlar yazılmayacaktır.

const değişkeni içine sadece style verileri değil, hem de bileşen özellikleri aktarılabilir. Örneğin,

bileşenler değişkenini bir arraw fonksiyonu atadık ve App sınıfından bu fonksiyonu return ettik.

İki style değişkenini bir bilesen üzerinde kullanabilirsiniz. Hatırlarsanız, HTML’de bir class’a birden fazla CSS bağlanabiliyordu. Bu kural React Native’de devam ediyor. Örneğin,

TouchableHighlight adında yeni bir bileşen ekledik. Yalnız bu bileşeni kullanmak için

import {TouchableHighlight} from ‘react-native’;

  satırını en üste eklemelisiniz. CSS bilginiz olduğu takdirde kolayca style bölümünü çözebilirsiniz. Ayrıca birden fazla değişkeni bağlamak için [degisken1, degisken2…] şeklinde bir kullanım olduğunu gördük. Aslında bu özellikler nesnenin style bölümüne atanıyor. Aynı kodu:

<TouchableHighlight style={[Object.assign(btn, btnPrimary)]}>

şeklinde yazabiliriz. Benim tavsiyen […] arasına eklemenizdir.

Stylesheet

Tüm style’ları ayrı ayrı değişkenlerde kullanmak yerine tek bir değişken içinde toplayabilirsiniz. Örneğin, yukarıdaki style’ları tek örnek içinde toplayalım.

StyleSheet.create ile birden fazla etiketi bağlayabilirsiniz ve style oluşturabilirsiniz. Burada styleİsmi: {özellikler:değerler} şeklindedir. Bileşen üzerinde style’a bağlama ise ise styles.viewStyles, styles.btn ve benzeri şekilde yapılır. Üst örneklerde style bölümünde yanlış bir anahtar girdiğinizde sadece bir warning oluşturur. Ancak, StyleSheet.create ile style yarattığınızda hata yaparsanız direkt hata mesajı ile karşılaşırsınız. Kısacası, StyleSheet.create içinde kullanılan her işlem bir doğrulama işleminden geçer.

Stylesheet.hairlineWidth

Yukarıda görülen style tanımlamasında (örneğin borderWidth: 1) kullanılan özellik değerleri genelde numerik değerler içerir. Ancak, bazı özellikler Stylesheet.hairlineWidth bir değer olarak alabilir. Stylesheet.hairlineWidth border değeridir, ancak cihazdan cihaza küçük farklılıklar gösterebilir. (Ancak sayısal bir değer karşılığı vardır. Örneğin IOS için 0.5 gibi) Örneğimizde tek button kullanıyorduk, burada 4 button yapalım ve Stylesheet.hairlineWidth etkisini görelim.

Stylesheet.hairlineWidth özellikle border çiziminde daha net sonuçlar verir. Aslında cihaza göre boyut ayarlar. Bu açıdan bu tür özellikleri kullanmanızı öneririm.