Ders İçeriği
React Native Bileşenlerine Giriş
React Native, kullanıcı arayüzü oluşturmak için önceden tanımlanmış bileşenler sunar. Bu bileşenler, web geliştirmede kullandığınız HTML elementlerinin mobil karşılıklarıdır. Ancak HTML'den farklı olarak, React Native bileşenleri doğrudan native bileşenlere dönüştürülür.
Önemli: React Native'de HTML elementleri (div, span, p vb.) kullanılamaz. Bunun yerine React Native'in kendi bileşenlerini kullanmalısınız.
View Bileşeni
View bileşeni, React Native'in en temel yapı taşıdır. Web geliştirmede div elementinin karşılığıdır ve diğer bileşenleri gruplamak için kullanılır.
import React from 'react'; import { View, StyleSheet } from 'react-native'; const MyComponent = () => { return ( <View style={styles.container}> {/* Diğer bileşenler buraya gelir */} </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f0f0f0', padding: 20, }, }); export default MyComponent;
View Bileşeni Özellikleri:
| Özellik | Açıklama | Örnek |
|---|---|---|
| style | Bileşenin görünümünü belirler | style={styles.container} |
| onPress | Dokunma olayını yakalar | onPress={() => alert('Tıklandı!')} |
| accessible | Erişilebilirlik desteği | accessible={true} |
Text Bileşeni
Text bileşeni, uygulamanızda metin görüntülemek için kullanılır. Web'deki p, span, h1-h6 elementlerinin karşılığıdır.
import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const TextExample = () => { return ( <View style={styles.container}> <Text style={styles.title}>Ana Başlık</Text> <Text style={styles.subtitle}>Alt Başlık</Text> <Text style={styles.paragraph}> Bu bir paragraf metnidir. React Native'de tüm metinler Text bileşeni içinde olmalıdır. </Text> <Text style={styles.bold}>Kalın metin</Text> <Text style={styles.italic}>İtalik metin</Text> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', color: '#2c3e50', marginBottom: 10, }, subtitle: { fontSize: 18, color: '#34495e', marginBottom: 15, }, paragraph: { fontSize: 16, lineHeight: 24, color: '#555', marginBottom: 10, }, bold: { fontWeight: 'bold', }, italic: { fontStyle: 'italic', }, }); export default TextExample;
🎯 Text Bileşeni Özellikleri
| Özellik | Açıklama | Örnek Değer |
|---|---|---|
| numberOfLines | Maksimum satır sayısı | numberOfLines={2} |
| ellipsizeMode | Metin kesme şekli | 'tail', 'head', 'middle' |
| selectable | Metin seçilebilir mi? | selectable={true} |
| onPress | Dokunma olayı | onPress={() => {}} |
Image Bileşeni
Image bileşeni, uygulamanızda resim görüntülemek için kullanılır. Hem yerel hem de uzak resimleri destekler.
import React from 'react'; import { View, Image, StyleSheet } from 'react-native'; const ImageExample = () => { return ( <View style={styles.container}> {/* Yerel resim */} <Image source={require('./assets/logo.png')} style={styles.localImage} /> {/* Uzak resim */} <Image source={{uri: 'https://example.com/image.jpg'}} style={styles.remoteImage} /> {/* Yuvarlak resim */} <Image source={{uri: 'https://example.com/profile.jpg'}} style={styles.roundImage} /> </View> ); }; const styles = StyleSheet.create({ container: { alignItems: 'center', padding: 20, }, localImage: { width: 200, height: 100, marginBottom: 20, }, remoteImage: { width: 150, height: 150, marginBottom: 20, }, roundImage: { width: 80, height: 80, borderRadius: 40, }, }); export default ImageExample;
Resim Boyutlandırma: React Native'de Image bileşeninin boyutunu mutlaka belirtmelisiniz. Aksi takdirde resim görünmeyebilir.
Button Bileşeni
Button bileşeni, kullanıcı etkileşimi için temel buton işlevselliği sağlar. Basit ve hızlı buton oluşturmak için idealdir.
import React from 'react'; import { View, Button, Alert, StyleSheet } from 'react-native'; const ButtonExample = () => { const handlePress = () => { Alert.alert('Bilgi', 'Butona tıklandı!'); }; return ( <View style={styles.container}> <Button title="Tıkla" onPress={handlePress} color="#3498db" /> <View style={styles.spacing} /> <Button title="Devre Dışı Buton" onPress={handlePress} disabled={true} /> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, }, spacing: { height: 20, }, }); export default ButtonExample;
TextInput Bileşeni
TextInput bileşeni, kullanıcıdan metin girişi almak için kullanılır. Form oluşturma ve kullanıcı verisi toplama için temeldir.
import React, { useState } from 'react'; import { View, TextInput, Text, StyleSheet } from 'react-native'; const TextInputExample = () => { const [text, setText] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); return ( <View style={styles.container}> <Text style={styles.label}>Ad Soyad:</Text> <TextInput style={styles.input} value={text} onChangeText={setText} placeholder="Adınızı girin" /> <Text style={styles.label}>E-posta:</Text> <TextInput style={styles.input} value={email} onChangeText={setEmail} placeholder="E-posta adresinizi girin" keyboardType="email-address" autoCapitalize="none" /> <Text style={styles.label}>Şifre:</Text> <TextInput style={styles.input} value={password} onChangeText={setPassword} placeholder="Şifrenizi girin" secureTextEntry={true} /> <Text style={styles.output}>Girilen metin: {text}</Text> </View> ); }; const styles = StyleSheet.create({ container: { padding: 20, }, label: { fontSize: 16, fontWeight: 'bold', marginBottom: 5, marginTop: 15, }, input: { borderWidth: 1, borderColor: '#ddd', padding: 10, borderRadius: 5, fontSize: 16, }, output: { marginTop: 20, fontSize: 16, color: '#666', }, }); export default TextInputExample;
⌨️ TextInput Klavye Türleri
| keyboardType | Açıklama | Kullanım Alanı |
|---|---|---|
| default | Varsayılan klavye | Genel metin girişi |
| numeric | Sayısal klavye | Sayı girişi |
| email-address | E-posta klavyesi | E-posta adresi |
| phone-pad | Telefon klavyesi | Telefon numarası |
ScrollView Bileşeni
ScrollView bileşeni, içeriğin ekran boyutunu aştığı durumlarda kaydırma özelliği sağlar. Uzun içerikler için vazgeçilmezdir.
import React from 'react'; import { ScrollView, View, Text, StyleSheet } from 'react-native'; const ScrollViewExample = () => { return ( <ScrollView style={styles.container}> {[...Array(20)].map((_, index) => ( <View key={index} style={styles.item}> <Text style={styles.itemText}>Öğe {index + 1}</Text> </View> ))} </ScrollView> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, item: { backgroundColor: '#f8f9fa', padding: 20, marginVertical: 5, marginHorizontal: 10, borderRadius: 5, }, itemText: { fontSize: 16, textAlign: 'center', }, }); export default ScrollViewExample;
🏋️ Pratik Alıştırma
Aşağıdaki gereksinimleri karşılayan bir bileşen oluşturun:
- Bir başlık (Text)
- Kullanıcı adı girişi (TextInput)
- Şifre girişi (TextInput)
- Giriş butonu (Button)
- Profil resmi (Image)
📝 Bilgi Testi
Soru 1: React Native'de metin görüntülemek için hangi bileşen kullanılır?
Soru 2: Image bileşeninde mutlaka belirtilmesi gereken özellik nedir?
Soru 3: TextInput'ta şifre girişi için hangi özellik kullanılır?
Sonraki Adımlar
Bu derste React Native'in temel bileşenlerini öğrendiniz. Bir sonraki derste bu bileşenleri nasıl stillendireceğinizi ve Flexbox ile nasıl düzenleyeceğinizi öğreneceksiniz.
Bu Derste Öğrendikleriniz:
- View bileşeni ile layout oluşturma
- Text bileşeni ile metin görüntüleme
- Image bileşeni ile resim gösterme
- Button bileşeni ile kullanıcı etkileşimi
- TextInput bileşeni ile veri girişi
- ScrollView bileşeni ile kaydırılabilir içerik