Özet - Stil
- React Native kursu
- Başlangıç
- Ders 35/116
- 5 dk
StyleSheet, renk ve boşluğu birleştirerek bir kartvizit yazarsın.
Özet - Stil
Bu grupta dört şey öğrendin. style prop'u bir bileşene inline nesne ya da StyleSheet.create referansı verir. color, fontSize, fontWeight metni biçimlendirir. padding içerideki, margin dışarıdaki boşluğu ayarlar. borderWidth, borderColor, borderRadius kenarlık çizer.
Şimdi bunları birleştirip gerçek bir kartvizit bileşeni yazacaksın: adı büyük ve kalın, altında telefon numarası, kutu kenarlıklı ve iç boşluklu. İki küçük görev seni sonuca götürecek.
Uygulama Kartvizit iskeleti
Bir BusinessCard bileşeni yaz. StyleSheet.create ile card ve name stillerini tanımla. card: padding: 16, borderWidth: 1, borderColor: 'gray', borderRadius: 8. name: fontSize: 20, fontWeight: 'bold'. Bileşen bir <View style={styles.card}> döndürsün ve içinde <Text style={styles.name}>Ayşe</Text> bulunsun.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function BusinessCard() {
// View ve Text ile kartvizit iskeletini yaz
return null;
}
// card ve name stillerini buraya ekleÖrnek çözüm
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function BusinessCard() {
return (
<View style={styles.card}>
<Text style={styles.name}>Ayşe</Text>
</View>
);
}
const styles = StyleSheet.create({
card: { padding: 16, borderWidth: 1, borderColor: 'gray', borderRadius: 8 },
name: { fontSize: 20, fontWeight: 'bold' }
});Uygulama Kartvizite telefon ekle
Önceki iskelete phone stilini ekle: color: 'gray', marginTop: 4. Bileşenin <View style={styles.card}> içinde adın altında <Text style={styles.phone}>555 123 45 67</Text> de bulunsun.
Başlangıç kodu
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function BusinessCard() {
return (
<View style={styles.card}>
<Text style={styles.name}>Ayşe</Text>
{/* telefon satırını buraya ekle */}
</View>
);
}
const styles = StyleSheet.create({
card: { padding: 16, borderWidth: 1, borderColor: 'gray', borderRadius: 8 },
name: { fontSize: 20, fontWeight: 'bold' }
// phone stilini buraya ekle
});Örnek çözüm
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function BusinessCard() {
return (
<View style={styles.card}>
<Text style={styles.name}>Ayşe</Text>
<Text style={styles.phone}>555 123 45 67</Text>
</View>
);
}
const styles = StyleSheet.create({
card: { padding: 16, borderWidth: 1, borderColor: 'gray', borderRadius: 8 },
name: { fontSize: 20, fontWeight: 'bold' },
phone: { color: 'gray', marginTop: 4 }
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aynı stili çok yerde kullanırken en iyi yöntem?
// 50 bileşende aynı kart stili tekrar tekrar- Her bileşende inline nesne yaz
- StyleSheet.create ile bir kez tanımla Doğru cevap
- Her render'da yeni nesne oluştur
- Stil kullanmaktan vazgeç
Açıklama: StyleSheet.create bir kez tanımlar; referans tekrar kullanılır.
2 Stil özelliğini işlevine eşle
| Kavram | Anlamı |
|---|---|
StyleSheet.create |
Stilleri bir kez tanımlar |
padding |
İçerideki boşluk |
borderRadius |
Köşe yuvarlama |
fontWeight: 'bold' |
Kalın metin |