StyleSheet — nedir, React Native'de stil oluşturma

StyleSheet nedir?

StyleSheet — bileşen stillerini tanımlamak için yerleşik bir React Native API'si. Web geliştirmedeki CSS'nin aksine, RN stilleri tanımlamak için JavaScript nesneleri kullanır. StyleSheet.create — ana yöntem — bir stil nesnesi alır ve sayısal tanımlayıcılarla bir nesne döndürür.

StyleSheet, React Native çekirdeğinin bir parçasıdır ve ek paket kurulumu gerektirmez. Meta'ya (2026) göre, React Native projelerinin %95'i statik stiller için StyleSheet.create kullanır. Alternatifler: styled-components, Emotion, NativeWind (RN için Tailwind) — ancak yerleşik StyleSheet çekirdek için standart olmaya devam ediyor.

Tarih ve evrim

React Native'in (2015) ilk sürümlerinde, stiller yalnızca inline nesneler olarak tanımlanıyordu. StyleSheet.create, RN 0.4'te bir optimizasyon olarak ortaya çıktı. Konsept CSS'den alınmıştır: okunabilirlik ve performans için stilleri mantıktan ayırın. Yıllar içinde API genişledi: absoluteFill, hairlineWidth, flatten eklendi.

StyleSheet.create vs inline stiller

StyleSheet.create ile inline stiller arasındaki fark performans için kritiktir. Inline stil, bileşenin her render'ında oluşturulan sıradan bir JavaScript nesnesidir. StyleSheet.create — modül yüklemesi sırasında bir kez oluşturulan ve sayısal bir ID'ye dönüştürülen bir nesne.

Inline stil iletirken, React Native her seferinde tüm nesneyi JavaScript-Native köprüsü üzerinden gönderir. Karmaşık stillere sahip bir bileşen için bu, her render'da düzinelerce özelliğin aktarılması anlamına gelir. StyleSheet.create yalnızca sayısal bir tanımlayıcı iletir ve köprü yükünü azaltır.

// StyleSheet.create — optimize edilmiş yaklaşım
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline stil — her render'da yeni bir nesne oluşturur
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Inline ne zaman kullanılmalı: duruma bağlı dinamik stiller için (basılı, seçili, aktif). Statik stiller için her zaman StyleSheet.create kullanın. Kural: statik → create, dinamik → inline fonksiyon.

StyleSheet ile Flexbox düzeni

Flexbox — React Native'deki tek düzen mekanizması (CSS Grid desteklenmez, float yoktur). StyleSheet.create, flex kaplarını ve alt öğelerini tanımlamak için kullanılır. Temel özellikler: flex (doldurma katsayısı), flexDirection (row | column), justifyContent, alignItems.

Varsayılan olarak, React Native'de flexDirection column'dur (CSS'de — row). Web geliştirmeden geçiş yaparken hatırlanması gereken ilk şey budur. Tüm View bileşenleri varsayılan olarak flex kaplarıdır. Bir öğeyi ortalamak için alignItems: 'center' + justifyContent: 'center' kullanın.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Önemli: React Native'de tüm boyutlar birimsiz belirtilir (sadece bir sayı). Yüzdeler çalışır ancak yalnızca üst öğeye göre genişlik ve yükseklik için. margin ve padding sayıları kabul eder. Duyarlılık için yüzdeler yerine flex kullanın — farklı ekranlarda daha güvenilirdir.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API, create dışında birkaç yöntem daha içerir. StyleSheet.flatten bir stil dizisini tek bir nesnede birleştirir — kompozisyon ve stilleri üçüncü taraf bileşenlere iletmek için kullanışlıdır. StyleSheet.hairlineWidth, cihazda görünen minimum çizgi genişliğini döndürür.

StyleSheet.absoluteFill — önceden tanımlanmış bir stil { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Kaplama katmanları, modal pencereler ve tüm ekran üzerinde mutlak konumlandırma için kullanılır. StyleSheet.absoluteFillObject — aynısı ancak genişletme için nesne olarak.

// flatten — stilleri birleştir
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — minimum çizgi
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth ayırıcılar ve kenarlıklar için kullanışlıdır — ekran yoğunluğundan bağımsız olarak her zaman 1 fiziksel piksel gibi görünür. Retina ekranlarda bu 0,5 mantıksal nokta, normal ekranlarda — 1 noktadır. Kesin olarak belirli bir boyutta olması gereken öğeler için hairlineWidth kullanmayın.

Dimensions API ile duyarlı düzen

Dimensions API, farklı ekran boyutları için duyarlı düzen amacıyla StyleSheet ile birlikte kullanılır. Dimensions.get('window') pencerenin genişliğini ve yüksekliğini döndürür. Ekran döndürmede tepkisel güncellemeler için React Native'den useWindowDimensions hook'unu kullanın.

StyleSheet.create CSS gibi medya sorgularını desteklemese de, create içinde Dimensions'a dayalı değerler hesaplayabilir veya bir fonksiyon aracılığıyla dinamik stiller kullanabilirsiniz. Kesme noktaları için farklı genişlik aralıkları için ayrı stiller oluşturun.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions, ekran döndürme ve Split View ile tabletlerde pencere boyutu değişikliğinde otomatik olarak güncellenir. SSR (React Native Web) için, sunucu ve istemci arasındaki tutarsızlıkları önlemek amacıyla Dimensions.get'in bileşen montajından sonra çağrıldığından emin olun.

Projede stil organizasyonu

StyleSheet organizasyonu bir projede bakım yapılabilirliği ve kod yeniden kullanımını etkiler. Üç yaklaşım: bileşen içindeki yerel stiller (bileşenin yanında styles.js), genel stiller (renk, boşluk, tipografi sabitleriyle theme.js) ve kompozisyon yoluyla modüler stiller.

Önerilen yapı: renk, boyut ve tipografi sabitleriyle theme.js; her bileşenin yanında kendi özel stilleri için Component.styles.js; temel ve özel stilleri birleştirmek için StyleSheet.flatten. Büyük projeler için tema oluşturma ile bir Tasarım Sistemi kullanın.

// theme.js — genel sabitler
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Modüler organizasyonun faydaları: renkler ve boşluklar için tek gerçek kaynağı, basitleştirilmiş yeniden düzenleme (primary değiştir — tüm butonlar güncellenir), flatten ile stil yeniden kullanımı, kod okunabilirliği ve öngörülebilirliği. TypeScript projeleri için declare module aracılığıyla tema için türler ekleyin.