React Native中如何通过开关切换自定义配色的暗黑模式

因为颜色文件无法使用Hooks，我们需要把主题状态放在应用上层组件中管理，通过Context或状态提升的方式传递主题与颜色配置，具体步骤如下：

1. 改造颜色配置文件 #

调整colors.js，仅暴露亮色和暗色的颜色对象，不再固定导出静态colors：

// colors.js
export const lightMode = {
  TextColor1: '#FFFFFF',
  buttonColor1: '#FFFFFF',
  borderColor1: '#3CB3FF',
  // 其他颜色配置...
};

export const darkMode = {
  TextColor1: '#424242',
  buttonColor1: '#3CB3FF',
  borderColor1: '#3CB3FF',
  // 其他颜色配置...
};

2. 根组件管理主题状态（以App.js为例） #

在应用根组件中维护主题状态，同时加入本地持久化（使用AsyncStorage），确保重启应用后保留用户的主题选择：

// App.js
import React, { useState, useEffect, createContext, useContext } from 'react';
import { View, Switch, StyleSheet, Text, Button } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { lightMode, darkMode } from './colors';

// 创建主题Context，用于全局共享主题数据
const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  // 初始化时从本地存储读取之前保存的主题
  useEffect(() => {
    const loadSavedTheme = async () => {
      const storedTheme = await AsyncStorage.getItem('app_theme');
      if (storedTheme) {
        setIsDarkMode(storedTheme === 'dark');
      }
    };
    loadSavedTheme();
  }, []);

  // 切换主题的逻辑，同时保存到本地存储
  const toggleTheme = async () => {
    const newDarkModeStatus = !isDarkMode;
    setIsDarkMode(newDarkModeStatus);
    await AsyncStorage.setItem('app_theme', newDarkModeStatus ? 'dark' : 'light');
  };

  // 根据当前主题状态匹配对应的颜色配置
  const currentColors = isDarkMode ? darkMode : lightMode;

  return (
    <ThemeContext.Provider value={{ currentColors, toggleTheme, isDarkMode }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 自定义Hook，简化子组件获取主题数据的流程
export const useTheme = () => useContext(ThemeContext);

// 示例页面组件
const HomeScreen = () => {
  const { currentColors, toggleTheme, isDarkMode } = useTheme();

  return (
    <View style={[styles.container, { backgroundColor: currentColors.bgColor || '#fff' }]}>
      <Switch
        value={isDarkMode}
        onValueChange={toggleTheme}
        trackColor={{ false: '#e0e0e0', true: '#3CB3FF' }}
        thumbColor={isDarkMode ? '#ffffff' : '#f4f3f4'}
      />
      <Text style={{ color: currentColors.TextColor1, marginTop: 20 }}>当前主题示例文本</Text>
      <Button
        title="示例按钮"
        color={currentColors.buttonColor1}
        onPress={() => {}}
        style={{ marginTop: 20 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default function App() {
  return (
    <ThemeProvider>
      <HomeScreen />
    </ThemeProvider>
  );
}

3. 子组件中使用主题颜色 #

所有需要使用颜色的子组件，通过自定义Hook useTheme 获取当前颜色配置即可：

// 任意子组件
import { useTheme } from './App';

const ProfileCard = () => {
  const { currentColors } = useTheme();

  return (
    <View style={{ 
      borderColor: currentColors.borderColor1, 
      borderWidth: 1, 
      padding: 16,
      borderRadius: 8
    }}>
      <Text style={{ color: currentColors.TextColor1, fontSize: 16 }}>用户昵称</Text>
    </View>
  );
};

关键说明 #

• 颜色文件仅负责定义亮色/暗色的颜色集合，不涉及任何状态逻辑，规避了在颜色文件中使用Hooks的限制。
• 通过Context实现主题状态的全局共享，无需逐层传递props，简化组件间的主题数据传递。
• 加入AsyncStorage持久化主题设置，避免用户重启应用后丢失主题选择。

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