跳到主要內容

Appearance

tsx
import {Appearance} from 'react-native';

Appearance 模組公開了使用者外觀偏好設定的相關資訊，例如他們偏好的色彩配置（淺色或深色）。

開發者筆記​

Appearance API 的靈感來自 W3C 的媒體查詢草案。色彩配置偏好設定是以 prefers-color-scheme CSS 媒體功能為模型。

範例​

您可以使用 Appearance 模組來判斷使用者是否偏好深色色彩配置

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

雖然色彩配置可以立即取得，但這可能會變更（例如，排定的色彩配置在日出或日落時變更）。任何依賴使用者偏好色彩配置的呈現邏輯或樣式，都應該嘗試在每次呈現時呼叫此函式，而不是快取該值。例如，您可以使用 useColorScheme React Hook，因為它提供並訂閱色彩配置更新，或者您可以使用內嵌樣式，而不是在 StyleSheet 中設定值。

參考

方法​

getColorScheme()​

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

指出目前使用者偏好的色彩配置。該值稍後可能會更新，無論是透過使用者直接操作（例如，在裝置設定中選取主題，或透過 setColorScheme 選取應用程式層級的使用者介面樣式），或是在排程上（例如，遵循日/夜週期的淺色和深色主題）。

支援的色彩配置

  • light：使用者偏好淺色主題。
  • dark：使用者偏好深色主題。
  • null：使用者未指明偏好的色彩主題。

另請參閱：useColorScheme Hook。

注意：使用 Chrome 進行偵錯時，getColorScheme() 將始終傳回 light。

setColorScheme()​

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

強制應用程式始終採用淺色或深色介面樣式。預設值為 null，這會導致應用程式繼承系統的介面樣式。如果您指派不同的值，則新樣式會套用至應用程式以及應用程式內的所有原生元素（Alerts、Pickers 等）。

支援的色彩配置

  • light：套用淺色使用者介面樣式。
  • dark：套用深色使用者介面樣式。
  • null：遵循系統的介面樣式。

注意：此變更不會影響系統選取的介面樣式或在其他應用程式中設定的任何樣式。

addChangeListener()​

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

新增一個事件處理常式，當外觀偏好設定變更時會觸發。