Birleştirme
- React Native kursu
- İleri seviye
- Ders 83/83
- 6 dk
Tüm katmanları birleştirerek çalışan bir mini servis uygulaması yazarsın.
Tüm katmanları birleştir
Son derste tüm parçaları bağlıyoruz: auth context, API fetch, kamera, konum ve offline cache. App açılışta önce loadCache ile cache'ten görevleri yükler; sonra useNetInfo ile bağlantı varsa API'den günceller. Auth varsa giriş ekranı yerine görev listesi gösterilir.
Bu birleşim, ileri seviye bir React Native uygulamasının iskeletidir. Her katman ayrı bir derste kuruldu; şimdi hepsi birlikte çalışıyor. Cache ile hızlı açılış, auth ile güvenli erişim, native ile saha özellikleri. Bir sonraki adımda useEffect ile bu akışı başlatacaksın.
Uygulama useEffect ile akışı başlat
Önceki kodun üstüne bir useEffect ekle. Bağımlılık dizisi [] olsun (yalnızca mount'ta). İçinde önce loadCache() çağrısı yapsın, sonra fetchTasks çağrısı yapsın.
Başlangıç kodu
import React, { useState, createContext, useContext } from 'react';
import { Text, View } from 'react-native';
const AuthContext = createContext(null);
export function useAuth() { return useContext(AuthContext); }
function App() {
const [tasks, setTasks] = useState([]);
const [user, setUser] = useState(null);
return (
<AuthContext.Provider value={{ user, setUser }}>
<View>
<Text>Saha Raporu</Text>
</View>
</AuthContext.Provider>
);
}
export function useCamera() {
const [photo, setPhoto] = useState(null);
const takePhoto = async () => {
setPhoto('photo-uri');
};
return { photo, takePhoto };
}
async function loadCache() {
const raw = await AsyncStorage.getItem('tasks');
if (raw) {
setTasks(JSON.parse(raw));
}
}
// useEffect ile akışı buraya başlatÖrnek çözüm
import React, { useState, createContext, useContext } from 'react';
import { Text, View } from 'react-native';
const AuthContext = createContext(null);
export function useAuth() { return useContext(AuthContext); }
function App() {
const [tasks, setTasks] = useState([]);
const [user, setUser] = useState(null);
return (
<AuthContext.Provider value={{ user, setUser }}>
<View>
<Text>Saha Raporu</Text>
</View>
</AuthContext.Provider>
);
}
export function useCamera() {
const [photo, setPhoto] = useState(null);
const takePhoto = async () => {
setPhoto('photo-uri');
};
return { photo, takePhoto };
}
async function loadCache() {
const raw = await AsyncStorage.getItem('tasks');
if (raw) {
setTasks(JSON.parse(raw));
}
}
useEffect(() => {
loadCache();
fetchTasks();
}, []);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 App açılışta ilk ne yapar?
useEffect(() => { /* ? */ }, []);- Cache'ten yükler Doğru cevap
- Çıkış yapar
- Fotoğraf çeker
- Renk değiştirir
Açıklama: Önce cache'ten görevler yüklenir.
2 Katmanı rolüne eşle
| Kavram | Anlamı |
|---|---|
AuthContext |
Giriş state'i |
loadCache |
Cihazdan yükler |
useCamera |
Fotoğraf çeker |
NetInfo |
Bağlantı izler |
3 Bağımlılık dizisi
useEffect(() => { loadCache(); fetchTasks(); }, ____);useEffect(() => { loadCache(); fetchTasks(); }, []);Açıklama: Boş dizi yalnızca mount'ta çalıştırır.
4 Bu projede offline nasıl sağlandı?
AsyncStorage + NetInfo- Tema ile
- Animasyon ile
- Cache ile Doğru cevap
- Bildirim ile
Açıklama: AsyncStorage cache + NetInfo ile offline çalışır.