javascript - 反应原生颜色方案

Question

我需要知道colorScheme设备的。

我找到了两种知道的方法，但我不明白两者之间有什么区别。

您推荐使用哪一种，为什么？

使用配色方案

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
}

Answer 1

useColorScheme 只显示颜色方案，并称为外观模块，用于设置您应该使用外观，有关更多信息，请参见：链接

Answer 2

React 钩子获取当前useColorScheme()用户偏好，然后订阅更改。这意味着可以立即读取首选项，然后根据更改自动更新。这有点令人困惑，因为钩子确实来自外观模块。

从文档：

useColorScheme React hook 提供并订阅来自 Appearance 模块的配色方案更新。返回值表示当前用户首选的配色方案。该值可以稍后通过直接用户操作（例如，设备设置中的主题选择）或按计划（例如，遵循白天/黑夜循环的明暗主题）来更新。

Appearance.getColorScheme()读取用户首选项一次。如果用户或计划在应用程序处于活动状态时更改首选项，则应用程序将不会更新。但是，可以将事件侦听器配置为监视首选项更改并允许应用程序响应更改。

useColorScheme()对于大多数应用程序来说似乎更简单。