React Native中Context API实现主题切换，重启后无法保留用户选中主题求助

问题根源很明确：你只在用户选择主题时把颜色存入了AsyncStorage，但应用启动时没有主动读取缓存并更新Context的初始状态，导致Context始终用默认值初始化，重启后自然显示默认色。以下是具体修复方案：

1. 修改ThemeContext，启动时优先加载缓存 #

在Context的Provider组件里，通过useEffect在组件挂载时读取AsyncStorage中的缓存颜色，覆盖默认值：

import { createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  // 先设默认色，后续用缓存覆盖
  const [backgroundColor, setBackgroundColor] = useState('#ffffff');

  useEffect(() => {
    const loadSavedTheme = async () => {
      try {
        const savedColor = await AsyncStorage.getItem('appBackgroundColor');
        if (savedColor) {
          setBackgroundColor(savedColor);
        }
      } catch (err) {
        console.error('读取主题缓存失败:', err);
      }
    };

    loadSavedTheme();
  }, []);

  // 统一保存主题的方法（更新状态+存入缓存）
  const saveThemeColor = async (color) => {
    setBackgroundColor(color);
    try {
      await AsyncStorage.setItem('appBackgroundColor', color);
    } catch (err) {
      console.error('保存主题失败:', err);
    }
  };

  return (
    <ThemeContext.Provider value={{ backgroundColor, saveThemeColor }}>
      {children}
    </ThemeContext.Provider>
  );
};

export default ThemeContext;

2. 确保入口组件被ThemeProvider包裹 #

检查你的App入口文件（比如App.js），确保整个应用都在ThemeProvider的范围内，这样启动时才能触发缓存读取逻辑：

import { ThemeProvider } from './ThemeContext';
import MainScreen from './MainScreen';

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

export default App;

3. 可选：解决启动时的短暂闪烁问题 #

如果读取缓存的过程有延迟，可能会短暂显示默认色再切换到用户选择的颜色。可以加个加载状态优化体验：

export const ThemeProvider = ({ children }) => {
  const [backgroundColor, setBackgroundColor] = useState('#ffffff');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const loadSavedTheme = async () => {
      try {
        const savedColor = await AsyncStorage.getItem('appBackgroundColor');
        if (savedColor) setBackgroundColor(savedColor);
      } catch (err) {
        console.error('读取主题缓存失败:', err);
      } finally {
        setIsLoading(false);
      }
    };

    loadSavedTheme();
  }, []);

  // 加载时显示和默认色一致的占位视图，避免闪烁
  if (isLoading) {
    return <View style={{ flex: 1, backgroundColor }} />;
  }

  return (
    <ThemeContext.Provider value={{ backgroundColor, saveThemeColor }}>
      {children}
    </ThemeContext.Provider>
  );
};

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