React Native/JS styled-components Kullanımına Giriş

T. Emre Yildirim
Kodcular
Published in
2 min readAug 26, 2019

İlk Türkçe yazımda bu konuda pek kaynak göremediğim için styled-components’i seçtim. React native geliştiricilerinin çoğunun takip ettiği gibi react-native’de css kullanımı için birkaç yol bulunmakta. Bunlardan en yaygın olanı view içinde inline css veya const içinde tanımladığımız inline css.

Örnek:

Eğer frontend geliştirmeye single-page frameworkler ile başlamış biri iseniz inline css’teki camelCaseKullanımı sizi pek rahatsız etmeyebilir çalışmanız açısından.

Ancak, frontend geliştirmeye div’ler ve hatta tablolar kullanarak başlamış biri iseniz bu kullanım sizin hoşunuza gitmeyebilir ve pratik de gelmeyebilir. Bunun dışında, syntax hatalarını gösteriyor olsa da alışkın olmadığınız için özellikle ilk etapta çok hata yapmanıza sebebiyet verebilir. Fakat styled-components kullanırsanız alışık olduğunuz div styling ile yolunuza devam edebilirsiniz.

Örnek:

Buna ek olarak, alışkın olduğumuz css tag’lerini de styled-components aracılığıyla kullanabiliriz (klasik css kullanımının yerine):

geleneksel css kullanımı
styled-components kullanımı

Inline css kullanımını birçok react-native tutorial’ı başlangıç aşaması için önermekte ancak bana kalırsa styled-components kullanmak bu noktada daha kolay ve yönetilebilir. Bu konunun detaylarıyla ilgili bir yazı daha yazmayı planlamaktayım, geri dönüşlerinizi memnuniyetle karşılarım…

--

--