React Native
Özet - Stil
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.
Örnek çözümü göster
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.
Örnek çözümü göster
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 }
});
Kendini test et
-
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
- Her render'da yeni nesne oluştur
- Stil kullanmaktan vazgeç
Cevabı göster
StyleSheet.create ile bir kez tanımla — StyleSheet.create bir kez tanımlar; referans tekrar kullanılır.
-
Stil özelliğini işlevine eşle
- StyleSheet.create
- Stilleri bir kez tanımlar
- padding
- İçerideki boşluk
- borderRadius
- Köşe yuvarlama
- fontWeight: 'bold'
- Kalın metin
Sıradaki ders: flexDirection
