useColorScheme
- React Native kursu
- Orta seviye
- Ders 85/116
- 5 dk
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ı.
Başlangıç kodu
import React from 'react';
import { Text, View } from 'react-native';
const light = { background: '#fff', text: '#000' };
const dark = { background: '#000', text: '#fff' };
export default function App() {
// useColorScheme ile sistem tercihini oku
const theme = light;
return (
<View style={{ backgroundColor: theme.background }}>
<Text style={{ color: theme.text }}>Tema</Text>
</View>
);
}Örnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useColorScheme ne döndürür?
- Sistemin açık/koyu tercihi Doğru cevap
- Bir bileşen
- Bir renk
- Bir liste
Açıklama: useColorScheme sistemin açık/koyu tercihidir döndürür.
2 useColorScheme çağrısı
const scheme = ____();const scheme = useColorScheme();Açıklama: useColorScheme() sistem tercihini verir.
3 useColorScheme kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
useColorScheme |
Sistem tercihi |
light |
Açık mod |
dark |
Koyu mod |
scheme |
Tercih değeri |