React Native中AsyncStorage存储主题色遇双击切换及刷新失效问题

问题1：切换主题需要双击生效 #

原因：setTheme是异步操作，调用存储方法时theme仍为旧值，导致存储的是切换前的主题，下次点击才会同步状态；另外原代码中获取DataClr的逻辑无实际作用。

修复方式：

• 使用函数式更新setTheme(prev => ...)确保获取最新状态
• 直接在切换逻辑中计算新主题，同步存储到AsyncStorage

问题2：刷新/重启应用后无法读取存储的主题 #

原因：主题初始化逻辑放在了单个组件中，而非全局的Context Provider里，导致Context初始状态始终为light，且其他组件无法共享存储的主题。

修复方式：

• 在Context的useEffect中初始化主题，从AsyncStorage读取并更新状态，确保全局组件一开始就能拿到正确的主题

修改后的Context.js #

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

const Context = createContext();

export const TProvider = ({children}) => {
  const [theme, setTheme] = useState('light');

  // 初始化时从AsyncStorage读取保存的主题
  useEffect(() => {
    const loadSavedTheme = async () => {
      const savedTheme = await AsyncStorage.getItem('Color');
      if (savedTheme) {
        setTheme(savedTheme);
      }
    };
    loadSavedTheme();
  }, []);

  const toggleTheme = async () => {
    // 函数式更新确保基于最新状态计算新主题
    setTheme(prevTheme => {
      const newTheme = prevTheme === 'light' ? 'dark' : 'light';
      // 同步存储新主题
      AsyncStorage.setItem('Color', newTheme);
      return newTheme;
    });
  };

  return (
    <Context.Provider value={{theme, toggleTheme}}>
      {children}
    </Context.Provider>
  );
};

export default Context;

修改后的First.js #

import React, {useContext} from 'react';
import {View, Button, Text} from 'react-native';
import Context from './Context';

const First = ({navigation}) => {
  const {theme, toggleTheme} = useContext(Context);

  console.log('Theme==>', theme);

  return (
    <View
      style={{
        height: '100%',
        padding: 20,
        backgroundColor: theme === 'light' ? '#fff' : '#000',
      }}>
      <Text
        style={{
          textAlign: 'center',
          color: theme === 'light' ? '#000' : '#fff',
        }}>
        First Screen
      </Text>
      <Button title="Change Color" onPress={toggleTheme} />
      <Button
        title="Go to next Screen"
        onPress={() => {
          navigation.navigate('Second');
        }}
      />
    </View>
  );
};
export default First;

关键修改点说明 #

1. Context.js：

   • 新增useEffect在Provider挂载时读取AsyncStorage中的主题，完成全局状态初始化
   • 修正函数名拼写toggleTheam→toggleTheme
   • 使用函数式更新setTheme，确保切换逻辑基于最新状态，同时同步存储新主题
   • 移除无用的AsyncData函数和DataClr变量

2. First.js：

   • 移除组件内的主题初始化逻辑，统一交给Context处理
   • 删除未使用的setTheme和AsyncStorage导入
   • 同步修正调用的toggleTheme函数名

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