Theme context
- React Native kursu
- Orta seviye
- Ders 83/116
- 5 dk
Context ile tema yönetimini öğrenirsin.
Theme context
Tema, tüm bileşenlerden erişilen paylaşılan bir veridir. Bu yüzden Context ile tutulur. createContext() ile bir bağlam, Provider ile tema değeri yayılır.
Provider, o anki tema nesnesini değer olarak verir. Bileşenler useContext ile temaya erişir; prop geçmeden renkleri okurlar. Böylece tema tek noktadan yönetilir.
ThemeProvider
ThemeProvider, temayı tutan ve yayan bileşendir. İçinde theme state'ini tutar, <ThemeContext.Provider value={theme}> ile çocuklara verir. Uygulamanın en dışına sarılır. Bu sayede tema tek bir kaynaktan yönetilir.
Böylece tüm alt bileşenler useContext(ThemeContext) ile temaya erişir. Tema değiştiğinde Provider yeni değer yayar; tüm bileşenler güncellenir.
Uygulama ThemeContext ve ThemeProvider ekle
Bir ThemeContext ve ThemeProvider ekle. Provider içinde const [theme, setTheme] = useState(light) olsun 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>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 createContext çağrısı
const ThemeContext = ____();const ThemeContext = createContext();Açıklama: createContext bir bağlam yaratır.
2 ThemeProvider ne yapar?
- Renk üretir
- Liste çizer
- Temayı çocuklara yayar Doğru cevap
- Navigasyon kurar
Açıklama: ThemeProvider temayı Provider ile çocuklara yayar.
3 Theme context kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
createContext |
Bağlam yaratır |
ThemeProvider |
Temayı yayar |
useContext |
Temaya erişir |
Provider |
Değer verir |