React Native如何实现全局可保存切换的暗黑模式？

嘿，我来帮你搞定这个暗黑模式的问题！咱们一步步来，从全局状态管理到持久化存储，把整个流程串起来：

1. 先准备必要的依赖 #

如果你还没装持久化存储库，React Native 0.60+官方推荐用@react-native-async-storage/async-storage，先安装它：

npm install @react-native-async-storage/async-storage
# 或者用yarn
yarn add @react-native-async-storage/async-storage

2. 创建全局主题上下文（ThemeContext） #

在项目里新建ThemeContext.js文件，用来统一管理主题状态和切换逻辑：

import React, { createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { baseTheme, darkTheme } from './ColorSchemes';

// 创建主题上下文
export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  // 初始化主题：优先读取本地存储，默认用基础主题
  const [currentTheme, setCurrentTheme] = useState(baseTheme);
  const [isDarkMode, setIsDarkMode] = useState(false);

  // 组件挂载时加载保存的主题设置
  useEffect(() => {
    const loadSavedTheme = async () => {
      try {
        const savedMode = await AsyncStorage.getItem('isDarkMode');
        if (savedMode !== null) {
          const darkMode = JSON.parse(savedMode);
          setIsDarkMode(darkMode);
          setCurrentTheme(darkMode ? darkTheme : baseTheme);
        }
      } catch (err) {
        console.error('加载主题设置失败:', err);
      }
    };
    loadSavedTheme();
  }, []);

  // 主题切换方法，同时保存到本地存储
  const toggleTheme = async () => {
    const newDarkMode = !isDarkMode;
    setIsDarkMode(newDarkMode);
    setCurrentTheme(newDarkMode ? darkTheme : baseTheme);
    try {
      await AsyncStorage.setItem('isDarkMode', JSON.stringify(newDarkMode));
    } catch (err) {
      console.error('保存主题设置失败:', err);
    }
  };

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

3. 修改你的ColorSchemes.js #

把原来固定导出baseTheme的代码改成导出两个主题即可，去掉最后一行的export const colors = baseTheme;，换成：

// 确保palette、searchBarDarkTheme等变量已正确定义
const darkTheme = { /* 你的暗黑主题定义 */ };
const baseTheme = { /* 你的基础主题定义 */ };

export { darkTheme, baseTheme };

4. 在根组件中包裹ThemeProvider #

打开你的App.js（或根组件文件），用ThemeProvider包裹整个应用，让所有子组件都能访问主题状态：

import React from 'react';
import { ThemeProvider } from './ThemeContext';
import HomeScreen from './screens/HomeScreen'; // 替换成你的首页组件

const App = () => {
  return (
    <ThemeProvider>
      <HomeScreen />
    </ThemeProvider>
  );
};

export default App;

5. 在组件中使用主题和切换功能 #

比如在设置页面里添加暗黑模式开关，同时应用主题样式：

import React, { useContext } from 'react';
import { View, Text, Switch, StyleSheet } from 'react-native';
import { ThemeContext } from '../ThemeContext';

const SettingsScreen = () => {
  const { isDarkMode, toggleTheme, currentTheme } = useContext(ThemeContext);

  return (
    <View style={[styles.container, { backgroundColor: currentTheme.background }]}>
      <Text style={[styles.title, { color: currentTheme.main_font }]}>设置</Text>
      <View style={styles.toggleRow}>
        <Text style={{ color: currentTheme.main_font }}>暗黑模式</Text>
        <Switch
          value={isDarkMode}
          onValueChange={toggleTheme}
          trackColor={{ false: currentTheme.alternative, true: currentTheme.trackCardGradient }}
          thumbColor={isDarkMode ? currentTheme.main : currentTheme.main}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    marginBottom: 30,
  },
  toggleRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});

export default SettingsScreen;

6. 适配状态栏（StatusBar） #

利用你主题里定义的status_bar配置，在根组件或页面中动态更新状态栏：

import React, { useContext, useEffect } from 'react';
import { StatusBar } from 'react-native';
import { ThemeContext } from './ThemeContext';

const HomeScreen = () => {
  const { currentTheme } = useContext(ThemeContext);

  useEffect(() => {
    StatusBar.setBarStyle(currentTheme.status_bar.barStyle);
    StatusBar.setBackgroundColor(currentTheme.status_bar.backgroundColor);
  }, [currentTheme]);

  // 页面其他内容...
};

这样设置后，用户切换主题时状态会自动保存到本地，下次打开App会直接加载上次选择的主题，整个应用的颜色也会全局同步变化啦！

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