Skip to main content

React Native Uygulamalarında Stilleme (Styling) Nasıl Yapılır?

Meta Açıklaması​

React Native stil rehberiyle StyleSheet, Flexbox ve platforma özgü stillerle mobil uygulamalarınızı profesyonel görünüme kavuşturun.

🎯 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehber, React Native uygulamalarında stilleme (styling) işlemlerini adım adım öğretir.
Aşağıdaki konulara odaklanacağız:

  • StyleSheet.create() ile performanslı stil tanımlama
  • Flexbox farkları ve mantıksal piksel birimleri
  • Güvenli alanlar (SafeAreaView) kullanımı
  • Margin/Padding yardımcıları
  • Gölge (shadow) ve kenarlık (border) stilleri
  • Platforma özel stiller (Platform.OS, Platform.select)

🧩 1. StyleSheet Kullanımı ve Temel Tanımlamalar​

React Native’de CSS yerine StyleSheet bileşeniyle stil oluşturulur.
Bu yöntem stillerinizi optimize eder ve yönetimi kolaylaştırır.

import { StyleSheet } from 'react-native';

const stiller = StyleSheet.create({
  kutu: {
    height: 100, // kutu yüksekliği
  },
});

Bu, CSS’te .container tanımlamaya benzer ama daha performanslıdır.

Kullanımı:


<View style={stiller.kutu}></View>

Alternatif olarak satır içi stil de yazabilirsiniz:


<View style={{ height: 100 }}></View>

Ancak büyük projelerde inline stil performansı düşürebilir.

📏 2. Piksel Birimleri ve Flexbox Farklılıkları​

React Native’de px, em gibi birimler yoktur.

iOS: “mantıksal noktalar” (logical points)

Android: “yoğunluktan bağımsız piksel” (DIP)

Bu sayede farklı çözünürlüklerde bile aynı boyut görünür.


<View style={{ height: '100%' }}></View>

Bu örnek, bileşeni ebeveynin %100 yüksekliğine uzatır.

🔸 Flexbox Özellikleri Varsayılan display: flex aktif gelir.

Web’de flexDirection: row, React Native’de column’dur.

flex: 1 ile ekranın tamamını doldurabilirsiniz.


<View style={{ flex: 1 }}></View>

📱 3. SafeAreaView ile Ekranı Kaplamak​

iPhone X ve sonrası gibi çentikli cihazlarda içerik gizlenebilir. Bunu önlemek için SafeAreaView kullanılır:


import { SafeAreaView } from 'react-native';

<SafeAreaView style={{ flex: 1 }}>
  <View>{/* İçerikler */}</View>
</SafeAreaView>

SafeAreaView, içerikleri sistem çubuğundan korur.

🎨 4. Kenar Boşlukları: Margin & Padding Yardımcıları​

🧩 Yardımcı Özellik📝 Açıklama
marginVerticalÜst ve alt kenar boşluklarını aynı anda ayarlar.
paddingVerticalÜst ve alt iç boşlukları aynı anda ayarlar.
marginHorizontalSol ve sağ kenar boşluklarını aynı anda ayarlar.
paddingHorizontalSol ve sağ iç boşlukları aynı anda ayarlar.

Ayrıca marginStart / marginEnd yönlere göre (row veya row-reverse) otomatik davranır.

🧱 5. Border ve Shadow (Kenarlık ve Gölge) Stilleri​

🟦 Kenarlık (Border)​

React Native, CSS’teki border kısa yazımını desteklemez.


<View style={{
  borderColor: '#888',
  borderWidth: 2,
  borderStyle: 'dashed',
  borderRadius: 10,
  borderTopStartRadius: 20,
}} />

Renk, kalınlık ve köşeler ayrı ayrı tanımlanır.

🌗 Gölge (Shadow)​

iOS’ta özel shadow özellikleri bulunur:


<View style={{
  shadowOffset: { height: 3, width: 3 },
  shadowColor: '#000',
  shadowOpacity: 0.5,
  shadowRadius: 5,
}} />

Android’de ise elevation özelliği kullanılır:


<View style={{ elevation: 5 }} />

Ancak elevation, özelleştirilemez ve sınırlı bir gölgelendirme sunar.

⚙️ 6. Platforma Özgü Stil Yönetimi​

React Native’de bazı stiller yalnızca belirli platformlarda geçerlidir. Platform bileşeniyle koşullu stiller tanımlayabilirsiniz.


import { Platform } from 'react-native';

const stil = {
  height: Platform.OS === 'android' ? 100 : 20,
  backgroundColor: Platform.OS === 'ios' ? 'yellow' : 'blue',
};

Platform.OS size ios veya android döndürür.

Daha karmaşık durumlar için Platform.select() kullanın:


const stil = {
  ...Platform.select({
    ios: { width: 100 },
    android: { width: 75 },
  }),
};

Bu yöntem, her platforma farklı stil uygulamak için idealdir.

💬 Sıkça Sorulan Sorular (SSS)​

  1. Web CSS kütüphanelerini kullanabilir miyim?

Hayır. React Native kendi stil sistemini kullanır. Ancak styled-components/native ile benzer yapı kurulabilir.

  1. Bir bileşene birden fazla stil verebilir miyim?

Evet. style prop’una dizi şeklinde geçebilirsiniz:


<View style={[stiller.genel, stiller.ozel]} />
  1. Shadow neden Android’de farklı çalışıyor?

Android elevation, iOS ise shadowColor ve shadowOffset kullanır.

  1. Performans için neye dikkat etmeliyim?

Tüm stilleri StyleSheet.create() ile tanımlayın; inline stillerden kaçının.

  1. SafeAreaView her projede gerekli mi?

Evet, özellikle çentikli ekranlarda içeriğin gizlenmesini engeller.

🏁 Sonuç​

React Native’de stillendirme, web dünyasındaki CSS’ten farklı bir mantık gerektirir. Bu rehberde StyleSheet, Flexbox, SafeAreaView, gölge ve platforma özgü stillerle mobil tasarımı öğrendiniz.

💡 Rabisu Bulut üzerinde React Native projenizi barındırarak, platform bağımsız profesyonel mobil uygulamalarınızı hemen geliştirmeye başlayabilirsiniz.

yaml