Özet - Tema
- React Native kursu
- Orta seviye
- Ders 87/116
- 5 dk
Context, toggle ve kalıcı temayı birleştirerek bir tema sistemi yazarsın.
Özet - Tema
Tema sistemi dört parçadan oluşur: tema nesneleri (light/dark), ThemeContext ile paylaşım, useColorScheme ile sistem tercihi ve AsyncStorage ile kalıcılık. Toggle, açık ile koyu arasında geçiş yapar.
Provider temayı yayarken useContext okur; useEffect açılışta yükler, değişimde kaydeder. Bu dörtlü, gerçek uygulamaların tema altyapısıdır.
Uygulama ThemeContext ve ThemeProvider ekle
Bir ThemeContext ve ThemeProvider ekle. Provider const [theme, setTheme] = useState(light) tutsun ve <ThemeContext.Provider value={theme}> kullansın. light tanımlı.
Başlangıç kodu
import React, { createContext, useState } from 'react';
import { View } from 'react-native';
const light = { background: '#fff', text: '#000' };
// ThemeContext ve ThemeProvider'ı ekle
export default function App() {
return <View />;
}Örnek çözüm
import React, { createContext, useState } from 'react';
import { View } from 'react-native';
const light = { background: '#fff', text: '#000' };
const ThemeContext = createContext();
function ThemeProvider({ children }) {
const [theme, setTheme] = useState(light);
return (
<ThemeContext.Provider value={theme}>
{children}
</ThemeContext.Provider>
);
}
export default function App() {
return (
<ThemeProvider>
<View />
</ThemeProvider>
);
}Uygulama Toggle butonu ekle
theme ve setTheme zaten useContext(ThemeContext) ile alındı. Bir toggle butonu ekle: const toggle = () => setTheme(theme === light ? dark : light) ve <Button title="Değiştir" onPress={toggle} />. light ve dark tanımlı.
Başlangıç kodu
import React, { useContext } from 'react';
import { Button, Text, View } from 'react-native';
const light = { background: '#fff', text: '#000' };
const dark = { background: '#000', text: '#fff' };
const ThemeContext = React.createContext();
export default function App() {
const { theme, setTheme } = useContext(ThemeContext);
// toggle butonu ekle
return (
<View style={{ backgroundColor: theme.background }}>
<Text style={{ color: theme.text }}>Tema</Text>
</View>
);
}Örnek çözüm
import React, { useContext } from 'react';
import { Button, Text, View } from 'react-native';
const light = { background: '#fff', text: '#000' };
const dark = { background: '#000', text: '#fff' };
const ThemeContext = React.createContext();
export default function App() {
const { theme, setTheme } = useContext(ThemeContext);
const toggle = () => setTheme(theme === light ? dark : light);
return (
<View style={{ backgroundColor: theme.background }}>
<Text style={{ color: theme.text }}>Tema</Text>
<Button title="Değiştir" onPress={toggle} />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 AsyncStorage ne için kullanılır?
- Liste çizmek
- Renk üretmek
- Tema tercihi saklamak Doğru cevap
- Navigasyon
Açıklama: AsyncStorage tema tercihini saklar.
2 Tema özeti
| Kavram | Anlamı |
|---|---|
ThemeContext |
Temayı paylaşır |
useColorScheme |
Sistem tercihi |
AsyncStorage |
Kalıcı saklama |
toggle |
Açık/koyu geçiş |