Bileşenler

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.

Örnek çözümü göster

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 },
});

Kendini test et

Boşluğu doldur: TextInput içe aktarma

import { View, Text, ____, StyleSheet } from 'react-native';

Cevabı göster

import { View, Text, TextInput, StyleSheet } from 'react-native';

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
- Stil vermek için
- Ekran geçişi için
Cevabı göster

Kullanıcıdan metin almak için — TextInput ile kullanıcı klavyeyle metin girer.
Eşleştir: TextInput özelliği ve görevi

placeholder

ipucu metni
value

giriş değeri
onChangeText

metin değişimi

Sıradaki ders: State ve olaylar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler