Bileşenler
- React Native kursu
- Başlangıç
- Ders 113/116
- 6 dk
View, Text ve TextInput bileşenlerini kurarsın.
TextInput ekle
İskelet hazır. Şimdi kullanıcıdan ürün adı almak için bir TextInput ekleyeceğiz. TextInput, kullanıcının klavyeyle metin girdiği alandır. placeholder özelliği ile boşken görünecek ipucu metnini verirsin.
İskeletteki <Text>'in altına bir <TextInput> koyarız. StyleSheet'e bir input stili ekleriz: kenarlık ve dolgu ile giriş alanını görselleştirir. TextInput'u da react-native paketinden içe aktarırız.
Placeholder ve stil
TextInput'un placeholder özelliği, giriş boşken görünen ipucu metnidir. Örneğin placeholder="Ürün adı" yazarsan, kullanıcı henüz bir şey yazmadığında gri renkte "Ürün adı" görünür. Kullanıcı yazmaya başlayınca bu metin kaybolur.
Giriş alanını görselleştirmek için StyleSheet'te bir input stili tanımlarsın: borderWidth: 1 ile ince bir kenarlık, padding: 8 ile iç boşluk, marginBottom: 8 ile altında boşluk verirsin. Böylece giriş alanı belirgin ve kullanışlı olur.
Uygulama Sıra sende: TextInput ekle
İskelete TextInput ekle. react-native içe aktarımına TextInput'u dahil et. Başlığın altına <TextInput placeholder="Ürün adı" style={styles.input} /> koy. StyleSheet'e input stili ekle: borderWidth: 1, padding: 8, marginBottom: 8.
Başlangıç kodu
import { View, Text, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Alışveriş Listesi</Text>
{/* TextInput ekle */}
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
});Örnek çözüm
import { View, Text, TextInput, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Alışveriş Listesi</Text>
<TextInput placeholder="Ürün adı" style={styles.input} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 },
input: { borderWidth: 1, padding: 8, marginBottom: 8 },
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: TextInput içe aktarma
import { View, Text, ____, StyleSheet } from 'react-native';import { View, Text, TextInput, StyleSheet } from 'react-native';Açıklama: TextInput react-native paketinden içe aktarılır.
2 TextInput ne için kullanılır?
<TextInput placeholder="Ürün adı" />- Metin görüntülemek için
- Kullanıcıdan metin almak için Doğru cevap
- Stil vermek için
- Ekran geçişi için
Açıklama: TextInput ile kullanıcı klavyeyle metin girer.
3 Eşleştir: TextInput özelliği ve görevi
| Kavram | Anlamı |
|---|---|
placeholder |
ipucu metni |
value |
giriş değeri |
onChangeText |
metin değişimi |