useColorScheme

useColorScheme ile sistem teması öğrenirsin.

useColorScheme

useColorScheme, işletim sisteminin açık/koyu tercihini okuyan yerleşik bir hook'tur. 'light', 'dark' ya da null döndürür. Kullanıcı ayarını değiştirdiğinde değer anında güncellenir.

Örnek: const scheme = useColorScheme(). scheme === 'dark' ile koyu temayı seçebilirsin. Bu, kullanıcının sistem tercihiyle başlamak için uygundur.

Uygulama useColorScheme ile tema seç

useColorScheme ile sistem tercihini oku: const scheme = useColorScheme(). Sonra const theme = scheme === 'dark' ? dark : light ile temayı seç. light ve dark tanımlı.

Örnek çözümü göster

import React from 'react';
import { Text, View, useColorScheme } from 'react-native';

const light = { background: '#fff', text: '#000' };
const dark = { background: '#000', text: '#fff' };

export default function App() {
  const scheme = useColorScheme();
  const theme = scheme === 'dark' ? dark : light;
  return (
    <View style={{ backgroundColor: theme.background }}>
      <Text style={{ color: theme.text }}>Tema</Text>
    </View>
  );
}

Sistem tercihi

useColorScheme, kullanıcının işletim sistemi ayarına saygı duyar. Telefon koyu moddaysa 'dark', açık moddaysa 'light' döner. Kullanıcı ayarı değiştirince hook anında günceller.

Uygulama açılışında sistem tercihini kullanmak iyi bir başlangıçtır. Kullanıcı daha sonra kendi tercihini toggle ile değiştirebilir. Böylece uygulama kullanıcının zaten alıştığı görünüme uyum sağlar.

Kendini test et

useColorScheme ne döndürür?
- Sistemin açık/koyu tercihi
- Bir bileşen
- Bir renk
- Bir liste
Cevabı göster

Sistemin açık/koyu tercihi — useColorScheme sistemin açık/koyu tercihidir döndürür.

useColorScheme çağrısı

const scheme = ____();

Cevabı göster

const scheme = useColorScheme();

useColorScheme kavramlarını eşleştir

useColorScheme

Sistem tercihi
light

Açık mod
dark

Koyu mod
scheme

Tercih değeri

Sıradaki ders: Persistent theme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler