Theme context

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ı.

Örnek çözümü göster

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

Kendini test et

createContext çağrısı

const ThemeContext = ____();

Cevabı göster

const ThemeContext = createContext();

ThemeProvider ne yapar?
- Renk üretir
- Liste çizer
- Temayı çocuklara yayar
- Navigasyon kurar
Cevabı göster

Temayı çocuklara yayar — ThemeProvider temayı Provider ile çocuklara yayar.
Theme context kavramlarını eşleştir

createContext

Bağlam yaratır
ThemeProvider

Temayı yayar
useContext

Temaya erişir
Provider

Değer verir

Sıradaki ders: Theme toggle

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler