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

React Native 2020-05-09 阅读 180 评论 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