React Native+Redux主题切换：重启App后选中主题消失求助

问题核心是App启动时未从AsyncStorage读取已保存的主题并同步到Redux，同时本地UI状态未与Redux主题状态联动。以下是具体修复步骤：

1. App启动时加载保存的主题到Redux #

修改App.js，在初始化流程中读取本地存储的主题并更新Redux状态：

import { useDispatch } from "react-redux";
import { switchTheme } from "./store/redux/actions";
import AsyncStorage from "@react-native-async-storage/async-storage";

const App: () => Node = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    const initApp = async () => {
      SplashScreen.hide();
      await requestUserPermission();
      NotificationListener();
      
      // 读取本地存储的主题
      const savedTheme = await AsyncStorage.getItem('@theme');
      if (savedTheme) {
        const parsedTheme = JSON.parse(savedTheme);
        dispatch(switchTheme(parsedTheme));
      } else {
        // 无保存主题时设置默认值
        dispatch(switchTheme('default'));
      }
    };

    initApp();
  }, [dispatch]);

  return (
    <Provider store={store}>
      <MainNavigator />
    </Provider>
  );
};

2. 同步本地UI状态与Redux主题状态 #

修改Settings.js，让本地checked状态跟随Redux的theme值变化，避免状态不一致：

import {useDispatch, useSelector} from "react-redux";
import {switchTheme} from "../store/redux/actions";
import CustomCheckBox from "../components/CheckBox"; 
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useEffect, useState } from "react";

const Settings = () => {
  const dispatch=useDispatch();
  const {theme}=useSelector(state=>state.themeState);

  const [checked, setChecked] = useState(theme);

  // 监听Redux主题变化，同步UI状态
  useEffect(() => {
    setChecked(theme);
  }, [theme]);

  const changeTheme=async(mode)=>{
      setChecked(mode);
      dispatch(switchTheme(mode));
      await AsyncStorage.setItem('@theme', JSON.stringify(mode));
      setModalVisible(!modalVisible);
  }

  return (
    <View style={{ justifyContent:'center', alignItems:'center', flexDirection:'row', padding:3, flex:1}}>
      <CustomCheckBox  
        color={'#fff'} 
        text="Default Theme" 
        status={checked === 'default' ? 'checked' : 'unchecked'} 
        onChange={()=> changeTheme('default')}
      />
      <CustomCheckBox  
        color={'#fff'} 
        text="Koyu Mod" 
        status={checked === 'dark' ? 'checked' : 'unchecked'} 
        onChange={()=> changeTheme('dark')} {/* 修复函数名错误：temaSec改为changeTheme */}
      />
    </View>
  )
}

3. 可选：给Redux初始状态设置默认主题 #

修改themeReducer.js，避免启动时theme为空：

const INITIAL_STATE={
    theme: 'default' // 设置默认主题
}

核心逻辑说明 #

• 启动时读取AsyncStorage并同步到Redux，保证重启后Redux状态为用户之前选择的主题
• 本地UI状态依赖Redux的theme值，确保UI显示与Redux状态始终一致
• 修复了Settings.js中函数名拼写错误

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