Ders İçeriği
React Native'de Stillendirme
React Native'de stillendirme, CSS'e benzer ancak bazı farklılıkları olan bir yaklaşım kullanır. Stiller JavaScript objeleri olarak tanımlanır ve StyleSheet API'si ile optimize edilir.
Önemli Farklar:
- CSS class'ları yerine JavaScript objeleri kullanılır
- Kebab-case yerine camelCase kullanılır (background-color → backgroundColor)
- Değerler string veya sayı olarak verilir
- Flexbox varsayılan layout sistemidir
StyleSheet API
StyleSheet.create() metodu, stilleri optimize eder ve performansı artırır. Inline stiller yerine bu yöntemi kullanmak önerilir.
import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const StyledComponent = () => { return ( <View style={styles.container}> <Text style={styles.title}>Başlık</Text> <Text style={styles.subtitle}>Alt başlık</Text> <View style={styles.box}> <Text style={styles.boxText}>Kutu içeriği</Text> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5', }, title: { fontSize: 24, fontWeight: 'bold', color: '#2c3e50', textAlign: 'center', marginBottom: 10, }, subtitle: { fontSize: 16, color: '#7f8c8d', textAlign: 'center', marginBottom: 20, }, box: { backgroundColor: '#3498db', padding: 20, borderRadius: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, // Android için gölge }, boxText: { color: 'white', fontSize: 18, textAlign: 'center', }, }); export default StyledComponent;
Temel Stil Özellikleri
React Native'de en sık kullanılan stil özelliklerini inceleyelim:
🎨 Renk ve Arka Plan
backgroundColor: '#3498db'
Mavi Arka Plan
color: '#e74c3c'
Kırmızı Metin
const colorStyles = StyleSheet.create({ redBackground: { backgroundColor: '#e74c3c', }, blueText: { color: '#3498db', }, transparentBackground: { backgroundColor: 'rgba(52, 152, 219, 0.5)', // Yarı şeffaf }, });
Flexbox Layout Sistemi
React Native, layout oluşturmak için Flexbox sistemini kullanır. Bu sistem, bileşenleri esnek ve responsive şekilde düzenlemenizi sağlar.
Flexbox Temelleri:
- flex: Bileşenin ne kadar alan kaplayacağını belirler
- flexDirection: Ana eksen yönünü belirler (row/column)
- justifyContent: Ana eksende hizalama
- alignItems: Çapraz eksende hizalama
Flex Direction
flexDirection özelliği, bileşenlerin nasıl sıralanacağını belirler:
flexDirection: 'row' (Varsayılan)
1
2
3
flexDirection: 'column'
1
2
3
const flexStyles = StyleSheet.create({ rowContainer: { flexDirection: 'row', // Yatay sıralama }, columnContainer: { flexDirection: 'column', // Dikey sıralama (varsayılan) }, rowReverse: { flexDirection: 'row-reverse', // Ters yatay sıralama }, columnReverse: { flexDirection: 'column-reverse', // Ters dikey sıralama }, });
Justify Content
justifyContent, ana eksende bileşenlerin nasıl hizalanacağını belirler:
Justify Content Playground
A
B
C
const justifyStyles = StyleSheet.create({ flexStart: { justifyContent: 'flex-start', // Başlangıca hizala }, center: { justifyContent: 'center', // Ortaya hizala }, flexEnd: { justifyContent: 'flex-end', // Sona hizala }, spaceBetween: { justifyContent: 'space-between', // Aralarında eşit boşluk }, spaceAround: { justifyContent: 'space-around', // Etraflarında eşit boşluk }, spaceEvenly: { justifyContent: 'space-evenly', // Her yerde eşit boşluk }, });
Align Items
alignItems, çapraz eksende bileşenlerin nasıl hizalanacağını belirler:
Align Items Playground
A
B
C
Pratik Layout Örnekleri
Gerçek uygulamalarda sık kullanılan layout desenlerini inceleyelim:
1. Header-Content-Footer Layout
const AppLayout = () => { return ( <View style={styles.container}> <View style={styles.header}> <Text style={styles.headerText}>Header</Text> </View> <View style={styles.content}> <Text>Ana İçerik</Text> </View> <View style={styles.footer}> <Text style={styles.footerText}>Footer</Text> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, header: { height: 60, backgroundColor: '#3498db', justifyContent: 'center', alignItems: 'center', }, headerText: { color: 'white', fontSize: 18, fontWeight: 'bold', }, content: { flex: 1, // Kalan alanı kapla padding: 20, backgroundColor: '#ecf0f1', }, footer: { height: 50, backgroundColor: '#2c3e50', justifyContent: 'center', alignItems: 'center', }, footerText: { color: 'white', fontSize: 14, }, });
2. Card Layout
const CardComponent = () => { return ( <View style={styles.card}> <View style={styles.cardHeader}> <Text style={styles.cardTitle}>Kart Başlığı</Text> <Text style={styles.cardDate}>12 Ocak 2024</Text> </View> <View style={styles.cardContent}> <Text style={styles.cardText}> Bu bir kart içeriğidir. Flexbox kullanarak düzenli bir layout oluşturduk. </Text> </View> <View style={styles.cardActions}> <Text style={styles.actionButton}>Beğen</Text> <Text style={styles.actionButton}>Paylaş</Text> </View> </View> ); }; const styles = StyleSheet.create({ card: { backgroundColor: 'white', borderRadius: 10, padding: 15, margin: 10, shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.1, shadowRadius: 3.84, elevation: 5, }, cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10, }, cardTitle: { fontSize: 18, fontWeight: 'bold', color: '#2c3e50', }, cardDate: { fontSize: 12, color: '#7f8c8d', }, cardContent: { marginBottom: 15, }, cardText: { fontSize: 14, lineHeight: 20, color: '#34495e', }, cardActions: { flexDirection: 'row', justifyContent: 'space-around', }, actionButton: { color: '#3498db', fontWeight: 'bold', fontSize: 14, }, });
Responsive Design
React Native'de responsive tasarım oluşturmak için Dimensions API'sini ve flex özelliklerini kullanabilirsiniz:
import { Dimensions } from 'react-native'; const { width, height } = Dimensions.get('window'); const responsiveStyles = StyleSheet.create({ container: { width: width * 0.9, // Ekran genişliğinin %90'ı height: height * 0.5, // Ekran yüksekliğinin %50'si }, smallScreen: { fontSize: width < 350 ? 14 : 16, // Küçük ekranlarda daha küçük font }, flexibleContainer: { flex: 1, flexDirection: width > height ? 'row' : 'column', // Yönlendirmeye göre layout }, });
Sonraki Adımlar
Bu derste React Native'de stillendirme ve Flexbox layout sistemini öğrendiniz. Bir sonraki derste navigasyon konusunu ele alacak ve sayfalar arası geçiş yapmayı öğreneceksiniz.
Bu Derste Öğrendikleriniz:
- StyleSheet API ile stil oluşturma
- Flexbox layout sistemi
- justifyContent ve alignItems kullanımı
- Pratik layout örnekleri
- Responsive design teknikleri