Appearance
import {Appearance} from 'react-native';
Appearance
模块提供了有关用户外观偏好的信息,例如他们偏好的配色方案(浅色或深色)。
开发者注意事项
- Android
- iOS
- Web
Appearance
API 的灵感来源于 W3C 的 媒体查询草案。配色方案偏好是根据prefers-color-scheme
CSS 媒体特性 进行建模的。
在 Android 10(API 级别 29)及更高版本的设备上,配色方案偏好将映射到用户的浅色或 深色主题 偏好。
在 iOS 13 及更高版本的设备上,配色方案偏好将映射到用户的浅色或 深色模式 偏好。
注意:在截屏时,默认情况下,配色方案可能会在浅色模式和深色模式之间闪烁。发生这种情况是因为 iOS 会在两种配色方案下都进行快照,并且使用配色方案更新用户界面是异步的。
示例
你可以使用 Appearance
模块来确定用户是否偏好深色配色方案
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
// Use dark color scheme
}
尽管配色方案是立即可用的,但这可能会发生变化(例如,日出或日落时计划的配色方案更改)。任何依赖于用户偏好配色方案的渲染逻辑或样式都应尝试在每次渲染时调用此函数,而不是缓存值。例如,你可以使用 useColorScheme
React Hook,因为它提供并订阅配色方案更新;或者你也可以使用内联样式,而不是在 StyleSheet
中设置值。
参考
方法
getColorScheme()
static getColorScheme(): 'light' | 'dark' | null;
指示当前用户偏好的配色方案。该值可能会在以后更新,无论是通过用户的直接操作(例如设备设置中的主题选择或通过 setColorScheme
设置的应用程序级用户界面样式),还是按照计划(例如遵循昼夜循环的浅色和深色主题)。
支持的配色方案
light
:用户偏好浅色主题。dark
:用户偏好深色主题。- null:用户未指定偏好的颜色主题。
另请参阅:useColorScheme
Hook。
注意:当使用 Chrome 进行调试时,
getColorScheme()
总是返回light
。
setColorScheme()
static setColorScheme('light' | 'dark' | null): void;
强制应用程序始终采用浅色或深色界面风格。默认值为 null
,这会导致应用程序继承系统的界面风格。如果你指定一个不同的值,新风格将应用于应用程序和应用程序内的所有原生元素(如 Alerts、Pickers 等)。
支持的配色方案
light
:应用浅色用户界面风格。dark
:应用深色用户界面风格。- null:遵循系统的界面风格。
注意:此更改不会影响系统选择的界面风格或在其他应用程序中设置的任何风格。
addChangeListener()
static addChangeListener(
listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
): NativeEventSubscription;
添加一个事件处理程序,当外观偏好改变时触发。