StyleSheet.create

StyleSheet.create ile stil nesnesi öğrenirsin.

StyleSheet.create

Inline nesneleri her render'da yeniden oluşturmak performansı düşürür. Bunun yerine StyleSheet.create ile stilleri bir kez tanımlar ve isimlendirirsin: const styles = StyleSheet.create({ card: { padding: 12 } });.

Tanımladığın nesneyi style={styles.card} biçiminde verirsin. Bu yöntem daha okunaklıdır; React Native de stilleri derleyip referans numarasına çevirerek daha hızlı karşılaştırma yapar. Aynı stili birden çok bileşende kullanabilirsin.

Tanımlama ve kullanma

Bir bileşende stilleri kullanmak için iki adım gerekir. Önce dosyanın altında const styles = StyleSheet.create({ ... }) ile tüm stilleri topla. Sonra bileşenin içinde style={styles.kart} biçiminde başvur.

İsimlendirme serbesttir ama anlamlı olsun: card, title, row, container. Birden çok stili dizi olarak da verebilirsin: style={[styles.card, styles.highlight]}. Sağdaki stil soldakinin üzerine yazar.

Uygulama StyleSheet ile kart yaz

Bir Card bileşeni yaz. StyleSheet.create ile card adında stil tanımla: { padding: 12, backgroundColor: 'white' }. Bileşen bir <View style={styles.card}> döndürsün ve içinde <Text>Kart</Text> bulunsun.

Örnek çözümü göster

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function Card() {
  return (
    <View style={styles.card}>
      <Text>Kart</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 12, backgroundColor: 'white' }
});

Kendini test et

style prop'una styles.card ver

<View style=____>
  <Text>Merhaba</Text>
</View>

Cevabı göster

<View style={styles.card}>
  <Text>Merhaba</Text>
</View>

StyleSheet.create neden tercih edilir?
```
const styles = StyleSheet.create({
  card: { padding: 12 }
});
```
- Inline nesneden daha kısa yazılır
- Stilleri bir kez derleyip daha hızlı karşılaştırır
- Yalnızca koyu temada çalışır
- CSS dosyası oluşturur
Cevabı göster

Stilleri bir kez derleyip daha hızlı karşılaştırır — StyleSheet.create stilleri referansa çevirip performansı artırır.
Terimi açıklamasına eşle

StyleSheet.create

Stilleri bir kez tanımlar
styles.card

Tanımlı stile başvuru
style prop

Bileşene stil veren prop
camelCase

Özellik adı biçimi

Sıradaki ders: Renk ve font

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler