Özet - Context
- React Native kursu
- Orta seviye
- Ders 18/116
- 5 dk
createContext, Provider ve useContext'i birleştirerek bir tema sistemi yazarsın.
Özet - Context
Bu grupta Context API'yi öğrendin. createContext ile bir context oluşturur, Provider ile değer sağlar, useContext ile değeri okursun. Default değer ise Provider yoksa devreye girer.
Şimdi bu dört parçayı birleştirip bir tema sistemi yazacaksın. Üst bileşen temayı state olarak tutar, Provider ile alt ağaca verir; alt bileşenler useContext ile temayı okur ve arayüz rengini ona göre günceller. Bu, gerçek uygulamalarda karşılaşacağın temel bir desendir.
Uygulama Tema context'i oluştur
ThemeContext oluştur. createContext ile varsayılan değer "light" ver. Sonra console.log(ThemeContext) ile yaz.
Başlangıç kodu
// createContext'i içe aktar
// ThemeContext'i createContext ile oluştur; varsayılan "light"
// ThemeContext'i yazdırÖrnek çözüm
import { createContext } from "react";
const ThemeContext = createContext("light");
console.log(ThemeContext);Uygulama Provider ve useContext birleştir
Bir App bileşeni yaz. useState ile theme tut (ilk değer "dark"). <ThemeContext.Provider value={theme}> ile <ThemedText />'i sar. ThemedText bileşeni useContext(ThemeContext) ile temayı okusun ve <Text>{theme}</Text> döndürsün.
Başlangıç kodu
// createContext, useState ve useContext'i içe aktar
// ThemeContext'i createContext ile oluştur (varsayılan null)
function ThemedText() {
// useContext ile ThemeContext'ten theme değerini oku
return <Text>Tema</Text>;
}
function App() {
// theme state'ini useState ile tut (ilk değer "dark")
// Provider ile <ThemedText />'i sar; value prop'una theme ver
return <ThemedText />;
}Örnek çözüm
import { createContext, useContext, useState } from "react";
import { Text } from "react-native";
const ThemeContext = createContext(null);
function ThemedText() {
const theme = useContext(ThemeContext);
return <Text>{theme}</Text>;
}
function App() {
const [theme, setTheme] = useState("dark");
return (
<ThemeContext.Provider value={theme}>
<ThemedText />
</ThemeContext.Provider>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Context hangi sorunu çözer?
const ThemeContext = createContext("light");- Prop drilling Doğru cevap
- Klasör yapısını
- Bileşen stillerini
- AsyncStorage'yı
Açıklama: Context prop drilling'i çözer.
2 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
createContext |
Context oluşturur |
Provider |
Değeri sağlar |
useContext |
Değeri okur |
default |
Provider yoksa döner |
3 Context'i oluştur
const ThemeContext = ____("light");const ThemeContext = createContext("light");Açıklama: createContext ile context oluşturulur.