跳到主要内容

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 钩子，因为它提供并订阅颜色方案更新，或者您可以使用内联样式而不是在 StyleSheet 中设置值。

参考

方法​

getColorScheme()​

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

指示当前用户偏好的颜色方案。该值可能会稍后更新，无论是通过用户的直接操作（例如，设备设置中的主题选择或通过 setColorScheme 设置的应用程序级选定用户界面样式），还是按计划（例如，跟随昼夜循环的亮色和深色主题）。

支持的颜色方案

  • light：用户偏好亮色主题。
  • dark：用户偏好深色主题。
  • null：用户未指明偏好的颜色主题。

另请参阅：useColorScheme 钩子。

注意：在使用 Chrome 调试时，getColorScheme() 将始终返回 light。

setColorScheme()​

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

强制应用程序始终采用亮色或深色界面样式。默认值为 null，这会导致应用程序继承系统的界面样式。如果您分配不同的值，新样式将应用于应用程序和应用程序内的所有原生元素（警报、选择器等）。

支持的颜色方案

  • light：应用亮色用户界面样式。
  • dark：应用深色用户界面样式。
  • null：遵循系统的界面样式。

注意：此更改不会影响系统选定的界面样式或任何在其他应用程序中设置的样式。

addChangeListener()​

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

添加一个事件处理程序，当外观偏好更改时触发。