Login

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ı.

Örnek çözümü göster

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

Kendini test et

Parola alanını gizle

<TextInput
  value={password}
  onChangeText={setPassword}
  ____={true}
/>

Cevabı göster

<TextInput
  value={password}
  onChangeText={setPassword}
  secureTextEntry={true}
/>

handleSubmit neden async olmalı?
- Çünkü animasyonlar async çalışır
- Çünkü stiller async yüklenir
- Çünkü fetch await ile beklenir
- Çünkü TextInput async gerektirir
Cevabı göster

Çünkü animasyonlar async çalışır — fetch await ile beklenir; bu yüzden async olmalı.
Login parçalarını eşle

TextInput

Kullanıcıdan değer alır
secureTextEntry

Parolayı gizler
setLoading

Yükleniyor durumunu yönetir
Alert.alert

Hata bildirir

Sıradaki ders: JWT token

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler