Özet - Context

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.

Örnek çözümü göster

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.

Örnek çözümü göster

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>
  );
}

Kendini test et

Context hangi sorunu çözer?
```
const ThemeContext = createContext("light");
```
- Prop drilling
- Klasör yapısını
- Bileşen stillerini
- AsyncStorage'yı
Cevabı göster

Prop drilling — Context prop drilling'i çözer.
Parçayı rolüne eşle

createContext

Context oluşturur
Provider

Değeri sağlar
useContext

Değeri okur
default

Provider yoksa döner

Context'i oluştur

const ThemeContext = ____("light");

Cevabı göster

const ThemeContext = createContext("light");

Sıradaki ders: Proje tasarımı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler