Wygląd

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

tsx

import {Appearance} from 'react-native';

Moduł Appearance udostępnia informacje o preferencjach wyglądu użytkownika, takie jak preferowany schemat kolorów (jasny lub ciemny).

Uwagi dla deweloperów

Android

The Appearance API is inspired by the Media Queries draft from the W3C. The color scheme preference is modeled after the prefers-color-scheme CSS media feature.

iOS

The color scheme preference will map to the user's Light or Dark theme preference on Android 10 (API level 29) devices and higher.

Web

The color scheme preference will map to the user's Light or Dark Mode preference on iOS 13 devices and higher.

Note: When taking a screenshot, by default, the color scheme may flicker between light and dark mode. It happens because the iOS takes snapshots on both color schemes and updating the user interface with color scheme is asynchronous.

Przykład

Modułu Appearance możesz użyć, aby sprawdzić, czy użytkownik preferuje ciemny schemat kolorów:

tsx

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

Chociaż schemat kolorów jest dostępny natychmiast, może ulec zmianie (np. zaplanowana zmiana o wschodzie lub zachodzie słońca). Każda logika renderowania lub style zależne od preferowanego schematu kolorów powinny wywoływać tę funkcję przy każdym renderowaniu, zamiast buforować wartość. Na przykład możesz użyć hooka Reacta useColorScheme, który dostarcza i subskrybuje aktualizacje schematu kolorów, lub stosować style inline zamiast ustawiać wartości w StyleSheet.

---

Dokumentacja

Metody

getColorScheme()

tsx

static getColorScheme(): 'light' | 'dark' | null;

Zwraca aktualnie preferowany przez użytkownika schemat kolorów. Wartość może zostać później zaktualizowana, albo poprzez bezpośrednią akcję użytkownika (np. wybór motywu w ustawieniach urządzenia lub styl interfejsu wybrany na poziomie aplikacji poprzez setColorScheme), albo zgodnie z harmonogramem (np. motywy jasne i ciemne następujące po cyklu dzień/noc).

Obsługiwane schematy kolorów:

• light: Użytkownik preferuje jasny motyw kolorystyczny.

• dark: Użytkownik preferuje ciemny motyw kolorystyczny.

• null: Użytkownik nie wskazał preferowanego motywu kolorystycznego.

Zobacz też: hook useColorScheme.

Uwaga: getColorScheme() zawsze zwróci light podczas debugowania w Chrome.

---

setColorScheme()

tsx

static setColorScheme('light' | 'dark' | null): void;

Wymusza, aby aplikacja zawsze stosowała jasny lub ciemny styl interfejsu. Domyślna wartość null powoduje dziedziczenie systemowego stylu interfejsu. Po przypisaniu innej wartości nowy styl obowiązuje w aplikacji i wszystkich natywnych elementach (Alerty, Pickery itp.).

Obsługiwane schematy kolorów:

• light: Stosuje jasny styl interfejsu.

• dark: Stosuje ciemny styl interfejsu.

• null: Dziedziczy styl interfejsu systemu.

Uwaga: Zmiana nie wpłynie na wybrany styl interfejsu systemu ani na style ustawione w innych aplikacjach.

---

addChangeListener()

tsx

static addChangeListener(
  listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
): NativeEventSubscription;

Dodaje obsługę zdarzenia wywoływanego przy zmianie preferencji wyglądu.