如何通过AsyncStorage等方式动态设置React Native Elements Theme Provider样式？

核心实现逻辑是将当前激活的主题模式作为响应式状态管理，状态变更时同步更新传入ThemeProvider的主题配置，同时搭配AsyncStorage持久化存储用户的主题偏好即可。

改造步骤 #

1. 先修正你现有主题配置的语法问题 #

你当前的theme函数语法存在缺失，调整为正确的预设配置写法：

// 预设的主题配置
const themeConfig = {
  light: {
    colors: {
      primary: colors.light,
      background: '#ffffff',
    },
  },
  dark: {
    colors: {
      primary: colors.dark,
      background: '#000000', // 原代码dark模式背景也为白色，可按需调整
    },
  }
}

2. 改造Root组件，加入主题状态和AsyncStorage逻辑 #

需要引入React状态和AsyncStorage处理异步读写：

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
// 其他原有导入省略

const Root = () => {
  // 存储当前激活的主题模式，默认先设为light
  const [currentTheme, setCurrentTheme] = useState('light');
  // 首次读取存储时的加载态，避免主题闪跳
  const [themeLoading, setThemeLoading] = useState(true);

  // 组件挂载时读取本地存储的主题偏好
  useEffect(() => {
    const getSavedTheme = async () => {
      try {
        const savedTheme = await AsyncStorage.getItem('theme_mode');
        if (savedTheme) {
          setCurrentTheme(savedTheme);
        }
      } catch (e) {
        // 读取失败直接用默认主题即可
      } finally {
        setThemeLoading(false);
      }
    };
    getSavedTheme();
  }, []);

  // 切换主题的方法，可全局传递给其他组件调用
  const toggleTheme = async (mode) => {
    setCurrentTheme(mode);
    try {
      await AsyncStorage.setItem('theme_mode', mode);
    } catch (e) {
      // 存储失败的兜底处理
    }
  };

  if (themeLoading) {
    // 这里可以返回自定义的加载占位屏
    return null;
  }

  return (
    <SafeAreaProvider>
      {/* 动态传入当前激活的主题 */}
      <ThemeProvider theme={themeConfig[currentTheme]}>
        <Provider store={store}>
          {/* 可以把toggleTheme通过context或者Redux传递到全局，供切换主题的页面调用 */}
          <App />
          <Toast ref={(ref) => Toast.setRef(ref)} />
        </Provider>
      </ThemeProvider>
    </SafeAreaProvider>
  );
};

3. 可选优化（适配你已有的Redux配置） #

因为你已经接入了Redux，可以把主题状态和切换方法放到Redux store中管理，无需额外传递context，全局任意组件都可以直接调用切换主题的action。

注意事项 #

• 所有使用主题样式的组件，需要通过RNE提供的useTheme()钩子或者withTheme高阶组件获取主题配置，才能在主题变更时自动重新渲染
• 不要使用React Native核心库中已废弃的AsyncStorage，安装社区维护的@react-native-async-storage/async-storage包使用
• 如果你需要支持系统自动跟随深色模式，可以搭配react-native-appearance库读取系统主题偏好，作为默认主题取值

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