Login
- React Native kursu
- İleri seviye
- Ders 44/83
- 5 dk
Login ekranı ve akışını öğrenirsin.
Login ekranı
Login ekranı kullanıcıdan e-posta ve parola ister. İki TextInput kullanırsın: biri e-posta, diğeri parola için. Parola alanında secureTextEntry prop'u true olmalı; böylece karakterler gizlenir. Her giriş, bileşen state'inde tutulur (useState).
Gönderme anında setLoading(true) yapılır; istek bitince setLoading(false). Buton üzerinde yükleniyor göstergesi belirir. Başarılı girişte login(data) çağrılarak auth context güncellenir; kullanıcı ana ekrana yönlendirilir.
handleSubmit akışı
Kullanıcı gönder tuşuna bastığında handleSubmit çağrılır. Önce setLoading(true), sonra fetch ile sunucuya istek atılır. Yanıt başarılıysa login({ user, token }) ile auth context güncellenir. Hata durumunda Alert.alert ile kullanıcı bilgilendirilir.
İşlev async olmalı; await ile beklenir. finally bloğunda setLoading(false) yazmak, hatada bile göstergenin kalkmasını sağlar. Bu kalıp tüm login akışlarında tekrar eder.
Uygulama login fonksiyonu çağır
onSubmit işlevini tamamla. login({ user: 'ayse', token: 'abc' }) çağrısı yaz. login auth context'ten useContext(AuthContext) ile alınmalı.
Başlangıç kodu
import React, { useContext } from 'react';
import { AuthContext } from './AuthContext';
export function useLogin() {
// auth'u context'ten al
async function onSubmit() {
// login'i çağır
}
return { onSubmit };
}Örnek çözüm
import React, { useContext } from 'react';
import { AuthContext } from './AuthContext';
export function useLogin() {
const auth = useContext(AuthContext);
async function onSubmit() {
auth.login({ user: 'ayse', token: 'abc' });
}
return { onSubmit };
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Parola alanını gizle
<TextInput
value={password}
onChangeText={setPassword}
____={true}
/><TextInput
value={password}
onChangeText={setPassword}
secureTextEntry={true}
/>Açıklama: secureTextEntry parolayı gizler.
2 handleSubmit neden async olmalı?
- Çünkü animasyonlar async çalışır Doğru cevap
- Çünkü stiller async yüklenir
- Çünkü fetch await ile beklenir
- Çünkü TextInput async gerektirir
Açıklama: fetch await ile beklenir; bu yüzden async olmalı.
3 Login parçalarını eşle
| Kavram | Anlamı |
|---|---|
TextInput |
Kullanıcıdan değer alır |
secureTextEntry |
Parolayı gizler |
setLoading |
Yükleniyor durumunu yönetir |
Alert.alert |
Hata bildirir |