Persistent theme
- React Native kursu
- Orta seviye
- Ders 86/116
- 5 dk
AsyncStorage ile kalıcı tema öğrenirsin.
Kalıcı tema
Kalıcı tema, kullanıcının seçtiği temayı uygulamayı kapatıp açınca da korur. Bunun için tercih AsyncStorage'a yazılır ve açılışta oradan okunur. Böylece kullanıcı her açılışta son seçtiği temayı görür.
Kaydetmek: AsyncStorage.setItem('theme', theme.name). Okumak: açılışta AsyncStorage.getItem('theme') ile bir efekt çağrılır; değer geri gelince setTheme uygulanır.
Açılışta yükleme
Açılışta temayı yüklemek için useEffect kullanılır. Mount'ta AsyncStorage.getItem('theme') çağrılır; dönen değer setTheme ile uygulanır. Bu efekt yalnızca bir kez çalışır. Bu, açılışta tercihin hazır olmasını sağlar.
Kullanıcı tema değiştirdiğinde, yeni değeri AsyncStorage.setItem ile kaydedersin. Böylece bir sonraki açılışta son tercih geri yüklenir.
Uygulama Tema değişince kaydet
Bir useEffect ekle; theme değişince AsyncStorage.setItem('theme', theme.name) çağrılsın. Bağımlılık dizisine theme koy. theme state'i ve AsyncStorage import'u tanımlı.
Başlangıç kodu
import React, { useState } from 'react';
import { View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
const light = { name: 'light', background: '#fff' };
const dark = { name: 'dark', background: '#000' };
export default function App() {
const [theme, setTheme] = useState(light);
// theme değişince AsyncStorage'a kaydet
return <View style={{ backgroundColor: theme.background }} />;
}Örnek çözüm
import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
const light = { name: 'light', background: '#fff' };
const dark = { name: 'dark', background: '#000' };
export default function App() {
const [theme, setTheme] = useState(light);
useEffect(() => {
AsyncStorage.setItem('theme', theme.name);
}, [theme]);
return <View style={{ backgroundColor: theme.background }} />;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 AsyncStorage import
import ____ from '@react-native-async-storage/async-storage';import AsyncStorage from '@react-native-async-storage/async-storage';Açıklama: AsyncStorage kalıcı saklama kütüphanesidir.
2 Kalıcı tema kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
AsyncStorage |
Saklama |
setItem |
Kaydeder |
getItem |
Okur |
theme |
Tercih değeri |
3 Kalıcı tema ne sağlar?
- Daha hızlı çizim
- Tercihin korunması Doğru cevap
- Renk üretimi
- Navigasyon
Açıklama: Kalıcı tema tercihi uygulamayı kapatınca da korur.