跳到主要内容

外观

React TSX
import {Appearance} from 'react-native';

Appearance 模块公开有关用户外观偏好的信息，例如他们偏好的系统配色方案（浅色或深色）。

开发者说明​

信息

Appearance API 的灵感来自 W3C 的 Media Queries 草案。配色方案偏好是参考 prefers-color-scheme CSS 媒体特性 建模的。

示例​

你可以使用 Appearance 模块来确定用户是否偏好深色配色方案：

React TSX
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // 使用深色配色方案
}

尽管配色方案会立即可用，但当未通过 setColorScheme() 覆盖时，这种情况可能会发生变化（例如在日出或日落时计划更改配色方案）。任何依赖用户偏好配色方案的渲染逻辑或样式都应尝试在每次渲染时调用此函数，而不是缓存该值。

推荐： 使用 useColorScheme Hook。

应用级覆盖​

setColorScheme() 会在应用级别覆盖配色方案——它不会影响系统设置或其他应用。传入 'unspecified' 会移除任何覆盖，恢复系统偏好。

参考

方法​

getColorScheme()​

React TSX
static getColorScheme(): 'light' | 'dark' | 'unspecified' | null;

返回当前活动的配色方案。该值可能会在运行时更改，既可能在系统级别更改（例如在日出或日落时计划更改配色方案），也可能在应用级别通过 setColorScheme() 覆盖时更改。

返回值：

  • 'light'：应用浅色配色方案。
  • 'dark'：应用深色配色方案。
  • 'unspecified'：永远不会返回（类型标注不正确）。
  • null：如果原生 Appearance 模块不可用，则可能返回。

另请参阅：useColorScheme（hook）。

setColorScheme()​

React TSX
static setColorScheme('light' | 'dark' | 'unspecified'): void;

强制应用始终采用浅色或深色界面样式。此更改会应用于应用及其中的所有原生元素（Alerts、Pickers 等）。

这是应用级覆盖——它不会影响系统选择的界面样式，也不会影响其他应用中设置的任何样式。

支持的值：

  • 'light'：应用浅色配色方案。
  • 'dark'：应用深色配色方案。
  • 'unspecified'：遵循系统配色方案（移除任何覆盖）。

addChangeListener()​

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

添加一个事件处理程序，当外观偏好发生变化时会触发。在 iOS 和 Android 上，回调中的 colorScheme 值始终是 'light' 或 'dark'。