React Native颜色方案

Question

我需要知道设备的 colorScheme。

我找到了两种方法来获取，但我不知道它们之间有什么区别。

你推荐使用哪一个，并解释原因？

useColorScheme

import { Text, useColorScheme } from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();
  return <Text>useColorScheme(): {colorScheme}</Text>;
};

外观

import { Appearance } from 'react-native';

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

- Paul

Answer 1

useColorScheme() React hook获取当前用户偏好并订阅更改。这意味着立即读取偏好设置，然后在更改时自动更新。有点令人困惑，因为该钩子来自Appearance模块。

根据文档：

useColorScheme React hook提供并订阅来自Appearance模块的颜色方案更新。返回值指示当前用户首选颜色方案。稍后可能会更新该值，无论是通过直接用户操作（例如在设备设置中选择主题），还是按计划进行（例如遵循昼夜循环的浅色和深色主题）。

Appearance.getColorScheme() 一次读取用户偏好设置。如果用户或计划在应用程序活动期间更改了偏好设置，则应用程序不会更新。但是，可以配置事件侦听器以监视偏好设置更改并允许应用程序响应更改。

对于大多数应用程序而言，useColorScheme()似乎更简单。

- David Richards

Answer 2

useColorScheme只是显示颜色方案，并调用Appearance模块，要设置它，您应该使用Appearance，有关更多信息，请参阅：链接

- Meisan Saba