Secure text
- React Native kursu
- Başlangıç
- Ders 28/116
- 5 dk
secureTextEntry ile şifre alanı öğrenirsin.
secureTextEntry
Şifre gibi hassas bilgiler için secureTextEntry prop'u kullanılır. secureTextEntry eklendiğinde (secureTextEntry={true} ya da kısa secureTextEntry) yazılan her karakter ekranda nokta olarak gösterilir.
Bu, parola alanlarında omuzdan gözetimi engeller; gerçek value yine düz metindir, yalnızca görüntü maskelenir. iOS'ta ek güvenlik için autoCorrect={false} ve autoCapitalize="none" eklemek iyi bir uygulamadır; bunlar tahmin ve büyük harf önerilerini kapatır.
secureTextEntry kullanımı
Tipik bir şifre alanı şöyle yazılır: <TextInput value={password} onChangeText={setPassword} secureTextEntry />. Burada secureTextEntry yalnızca görüntüyü maskeler; value hala düz metin olarak state'te tutulur.
Controlled deseni şifre alanlarında da aynıdır: useState ile state oluştur, value ve onChangeText prop'larını bağla, sadece ek olarak secureTextEntry ekle. Böylece hem güvenli görünüm hem tek kaynaklı veri akışı elde edilir.
Uygulama Şifre alanı kur
useState'i react'ten ve TextInput'u react-native'den içe aktar. password state'i oluştur (ilk değeri boş dize). <TextInput>'u controlled yap (value + onChangeText) ve secureTextEntry ekle.
Başlangıç kodu
// useState ve TextInput'u içe aktar
// password state'i oluştur
function App() {
return null;
}Örnek çözüm
import { useState } from "react";
import { TextInput, View } from "react-native";
function App() {
const [password, setPassword] = useState("");
return (
<View>
<TextInput value={password} onChangeText={setPassword} secureTextEntry />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Şifre kavramlarını eşle
| Kavram | Anlamı |
|---|---|
secureTextEntry |
Karakterleri gizler |
şifre |
Hassas bilgi |
nokta |
Gizli karakter göstergesi |
value |
Gerçek metin |
2 secureTextEntry ne zaman kullanılır?
<TextInput secureTextEntry />- İsim alanında
- E-posta alanında
- Şifre alanında Doğru cevap
- Not alanında
Açıklama: Şifre alanlarında karakterleri gizlemek için kullanılır.
3 secureTextEntry prop'u
<TextInput value={password} ____ /><TextInput value={password} secureTextEntry />Açıklama: secureTextEntry şifre alanında karakterleri gizler.