React Native ile Tasarım

tarihinde gönderilmiş tarafından

React Native ile uygulama geliştirmek bir web sitesi tasarlamak kadar oldukça basittir android uygulama geliştirme (JAVA) kadar karmaşık bir yapısı yoktur android te olduğu gibi tasarım için manifest dosyası string ler için XML kullanma zorunluluğu yoktur. Her sayfanızın tasarımını taglar ve biraz özelliştirilmiş CSS kullanarak kolayca tasarlayabilirsiniz, RN içinde css tasarımlarımızı aşağıda belirttiğim gibi tanımlıyoruz 

const style=StyleSheet.create({
  tasarim:{
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
}
});

yapıyı kısaca anlatmak gerekirse style adında bir değişken oluşturuyoruz ve buna StyleSheet tanımlıyoruz bunun içinde ise php yada buna benzer dillerden alışık olduğumuz benzer şekilde bir dizi oluşturuyoruz , dizimizin içerisindeki her ilk key değeri css tanımlamamız onun içerisinde verdiğimiz değerler ise css özellikleridir, tanımlamadan sonra bu yapıyı örnek olarak bir text e vermek istersek aşağıdaki yapıya sadık kalmamız gerekecektir.

<Text style={style.tasarim} > Yazımız</Text>

buradaki style ismi değişkendir yani dilediğiniz şekilde değiştirebilirsiniz ancak genel geçer şekilde yapmak daha sağlıklı olacaktır .

Sıklıkla kullanılan tasarım sözcüklerinden kısaca bahsedersek ;

flex : View componentlerinin ekrandaki payını belirtmek için kullanırız yani siz ekrana iki tane View eklerseniz ve bu Viewlerin 1 diğerine 3 verirseniz , 1 verdiğiniz View 3 verdiğiniz View e göre 3 kat daha az alan kaplayacaktır.

Önemle dikkat width ve height sözcüklerinizi mümkün olduğunca az kullanmaya genelde flex kullanmaya özen gösteriniz çünkü RN ile yazdığınız uygulama hem IOS hemde Android te çalışacağı için ve android ortamında yüzlerce ekran boyutu/çözünürlük olduğunu hesaba katarsak yaptığınız tasarım width ve height e bağlı olarak ekrana sığmayabilecektir.

flexDirection : iki farklı değer alabilir bunlardan birisi row diğeri ise column dur, row değeri verirseniz View larınız yanyana gözükür column değeri verirseniz alt alta sıralanır.

justifyContent : View için sağ ve soldan konumlandırmak için kullanılır.

alignItems : View için yukarıdan ve aşağıdan konumlandırmak için kullanılır.

backgroundColor : View arkaplan rengi vermek için kullanılır

width : genişlik ölçüsü sadece integer değer alır birimi yoktur

height : yükseklik ölçüsü sadece integer değer alır birimi yoktur

en çok kullanılanları listeledim bunların dışındaki tüm kodlar CSS ile benzerdir sadece ufak yazılım farklılıkları vardır diğerlerinin mantığına değinecek olursak web CSS için padding-top olarak kullanıyorsak RN de paddingTop olarak kullanırız.