第11章 React Native Appearance 模块解析：获取与设置颜色方案

版本：0.77 Appearance React TSX import {Appearance} from 'react-native';
Appearance 模块提供关于用户外观偏好的信息，例如首选的颜色方案（浅色或深色）。 开发者笔记 Android iOS Web Appearance API 的设计灵感来自 W3C 的 Media Queries 草案。其颜色方案偏好机制参照了 prefers-color-scheme CSS 媒体特性。 在 Android 10（API 级别 29）及更高版本的设备上，颜色方案偏好将映射到用户的浅色或深色主题偏好。 在 iOS 13 及更高版本的设备上，颜色方案偏好将映射到用户的浅色或深色模式偏好。 注意：截取屏幕截图时，颜色方案默认可能会在浅色和深色模式之间闪烁。这是因为 iOS 会同时截取两种颜色方案的快照，而使用颜色方案更新用户界面是异步的。 示例 你可以使用 Appearance 模块来判断用户是否偏好深色的颜色方案： React TSX const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
// 使用深色的颜色方案
}
虽然颜色方案可以立即获取，但它是可能改变的（例如，在日出或日落时自动切换颜色方案）。任何依赖用户颜色方案偏好的渲染逻辑或样式，都应尝试在每次渲染时调用此函数，而不是缓存该值。例如，你可以使用 useColorScheme React hook，因为它能提供并订阅颜色方案的更新；或者，你可以使用内联样式，而不是在 StyleSheet 中设置一个固定值。 参考 方法 getColorScheme() React TSX static getColorScheme(): 'light' | 'dark' | null;
指示当前用户首选的颜色方案。该值可能会在稍后更新，无论是通过直接的用户操作（例如，在设备设置中选择主题，或通过 setColorScheme 选择应用级别的 UI 风格），还是按计划进行（例如，跟随昼夜循环的浅色和深色主题）。 支持的颜色方案： light：用户偏好浅色的颜色主题。 dark：用户偏好深色的颜色主题。 null：用户未表明其偏好的颜色主题。 另请参阅：useColorScheme hook。 注意：在 Chrome 中调试时，getColorScheme() 始终返回 light。 setColorScheme() React TSX static setColorScheme('light' | 'dark' | null): void;
强制应用始终使用浅色或深色界面风格。默认值为 null，表示应用继承系统的界面风格。如果指定了其他值，新风格将应用于应用本身以及应用内的所有原生元素（Alert、Picker 等）。 支持的颜色模式： light：使用浅色界面风格。 dark：使用深色界面风格。 null：跟随系统的界面风格。 注意：此更改不会影响系统选择的界面风格，也不会影响其他应用中设置的风格。 addChangeListener()​ React TSXstatic addChangeListener(
listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
): EventSubscription;
添加一个事件监听器，当外观偏好发生变化时触发。