在 React Native 中检测并适配暗黑模式

React Native 2020-05-09 阅读 615 评论 0

Android 10 (API 级别 29) 及更高版本中提供深色主题背景，在iOS 13.0及更高版本中，用户可以选择深色系统的外观，称为 Dark Mode(深色模式 )。在 React Native，判断并适配用户手机的主题，有2种方法。

1. 0.62 及以上

在 React Native 0.62.0 中，React Native 带来了一些重大变化，例如更好的暗模式支持。使用 Appearance 模块，获取用户的首选配色方案（浅色或深色）。

import { Appearance } from 'react-native'

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

2. 所有版本

参考 react-native-dark-mode，检测黑暗模式，适用于 React Native 的所有版本。

import { useDarkMode } from 'react-native-dark-mode'

function Component() {
  const isDarkMode = useDarkMode()
  return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
}

最后更新 2020-05-09