placeholder
- React Native kursu
- Başlangıç
- Ders 27/116
- 5 dk
placeholder ve keyboardType öğrenirsin.
placeholder
placeholder, TextInput boşken kullanıcıya ne yazabileceğini gösteren ipucu metnidir. placeholder="Adınız" yazımıyla eklenir. Kullanıcı yazmaya başlayınca ipucu kaybolur.
Bu, gerçek değer value ile karıştırılmamalı; placeholder yalnızca boşken görünür ve state'e yazılmaz. Kısa ve açık ipuçları yaz: "E-posta", "Telefon", "Ad Soyad". Uzun açıklamaları placeholder'a koyma; kullanıcı yardımı için ayrı bir Text bileşeni kullan.
placeholderTextColor
placeholder varsayılan olarak soluk gri görünür. Rengini değiştirmek için placeholderTextColor prop'unu kullan: <TextInput placeholder="Adınız" placeholderTextColor="tomato" />.
Tasarımında ipucu rengini vurgulamak veya arka plandan ayırt etmek istediğinde bu prop işe yarar. Değer bir renk adı (gray, tomato) ya da onaltılık kod (#999) olabilir. Kullanıcı yazmaya başlayınca value yine varsayılan metin rengiyle gösterilir.
Uygulama placeholder içeren TextInput
TextInput'u react-native'den içe aktar. Bir <TextInput> ekle; placeholder prop'u "Kullanıcı adı" olsun ve placeholderTextColor prop'u "gray" olsun.
Başlangıç kodu
// TextInput'u içe aktar
// placeholder içeren bir TextInput göster
function App() {
return null;
}Örnek çözüm
import { TextInput, View } from "react-native";
function App() {
return (
<View>
<TextInput placeholder="Kullanıcı adı" placeholderTextColor="gray" />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 placeholder yazımı
<TextInput ____="E-posta" /><TextInput placeholder="E-posta" />Açıklama: placeholder prop'u boşken ipucu gösterir.
2 placeholder ne işe yarar?
<TextInput placeholder="E-posta" />- Gerçek değer tutar
- Boşken ipucu gösterir Doğru cevap
- Klavyeyi açar
- Metin rengini belirler
Açıklama: placeholder alan boşken kısa ipucu gösterir.
3 placeholder özelliklerini eşle
| Kavram | Anlamı |
|---|---|
placeholder |
Boşken ipucu |
placeholderTextColor |
İpucu rengi |
value |
Gerçek değer |
Kullanıcı yazınca |
İpucu kaybolur |