StyleSheet.create
- React Native kursu
- Başlangıç
- Ders 31/116
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function Card() {
// styles.card ile bir View döndür
return null;
}
// StyleSheet.create ile card stilini buraya ekleÖrnek çözüm
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' }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 style prop'una styles.card ver
<View style=____>
<Text>Merhaba</Text>
</View><View style={styles.card}>
<Text>Merhaba</Text>
</View>Açıklama: styles.card bir referanstır; süslü parantezle JSX'e gömülür.
2 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 Doğru cevap
- Yalnızca koyu temada çalışır
- CSS dosyası oluşturur
Açıklama: StyleSheet.create stilleri referansa çevirip performansı artırır.
3 Terimi açıklamasına eşle
| Kavram | Anlamı |
|---|---|
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 |