如何在纯React Native项目中开启并实现深色主题模式

首先useColorScheme()是React Native 0.62及以上版本内置的原生能力，无需额外安装依赖，会自动返回当前系统的颜色模式（light/dark），系统主题切换时会自动触发组件更新，基于它实现深色模式的步骤如下：

1. 定义双配色主题 #

先提前定义好浅色、深色两套全局配色规则：

// 浅色主题配置
const LightTheme = {
  background: '#ffffff',
  textPrimary: '#1a1a1a',
  textSecondary: '#666666',
  cardBg: '#f2f2f2',
  primaryColor: '#2563eb'
}

// 深色主题配置
const DarkTheme = {
  background: '#121212',
  textPrimary: '#ffffff',
  textSecondary: '#aaaaaa',
  cardBg: '#1e1e1e',
  primaryColor: '#8b5cf6'
}

如果需要和Expo配置userInterfaceStyle: "dark"一样强制固定深色模式，不需要跟随系统切换，后续只需要全局复用DarkTheme即可，不需要调用useColorScheme()。

2. 封装主题调用钩子 #

把系统颜色模式判断和主题匹配逻辑封装成自定义钩子，方便全局复用：

import { useColorScheme } from 'react-native'

export const useAppTheme = () => {
  const currentScheme = useColorScheme()
  // 跟随系统返回对应主题，要固定深色直接return DarkTheme即可
  return currentScheme === 'dark' ? DarkTheme : LightTheme
}

3. 组件中使用主题 #

在业务组件中调用钩子获取当前主题，传入样式生成函数即可：

import { View, Text, StyleSheet } from 'react-native'
import { useAppTheme } from './hooks/useAppTheme'

const DemoPage = () => {
  const theme = useAppTheme()
  const styles = getPageStyles(theme)

  return (
    <View style={styles.container}>
      <Text style={styles.title}>深色模式测试文本</Text>
    </View>
  )
}

// 动态生成样式
const getPageStyles = (theme) => StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.background,
    padding: 16
  },
  title: {
    fontSize: 18,
    color: theme.textPrimary
  }
})

export default DemoPage

额外注意事项 #

• 如果你的项目React Native版本低于0.62，需要先安装react-native-appearance第三方库再使用对应颜色模式获取API
• 如果需要支持用户在APP内手动切换主题，可结合React Context全局存储用户自定义的主题偏好，优先级高于系统返回的useColorScheme()值即可

内容的提问来源于stack exchange，提问作者Saptaparnee