React Native ThemeContext值不更新问题求助

核心问题拆解 #

1. themeHandler违反React Hooks规则：你在普通函数里调用useContext，Hooks只能在函数组件或自定义Hook的顶层执行，普通函数里调用会直接失效。
2. Context Provider作用域错误：Settings组件里的Themecontext.Provider只包裹了自身，其他需要主题的组件不在这个作用域内，自然拿不到更新后的值。
3. 状态更新时机错误：updateTheme里调用EventRegister.emit时传的是旧的getTheme值，因为setTheme是异步操作，此时状态还没完成更新。
4. 冗余的事件监听：Context本身就能实现主题状态的全局共享，没必要额外用EventRegister，反而增加复杂度。

修复步骤&代码调整 #

1. 重构ThemeContext，全局管理主题状态

创建包含Provider和自定义Hook的Context文件，让主题状态能全局共享：

// CustomComponents/Contexts.jsx
import { createContext, useState, useContext } from "react";

const ThemeContext = createContext("Light");

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("Light");

  const toggleTheme = () => {
    setTheme(prev => prev === "Light" ? "Dark" : "Light");
  };

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

// 自定义Hook，方便组件获取主题和切换方法
export function useTheme() {
  return useContext(ThemeContext);
}

2. 修改Settings组件，使用全局Provider

去掉Settings里的局部Provider，改用上面的全局ThemeProvider（确保根组件已包裹ThemeProvider，比如expo-router的_layout.jsx）：

// Settings.tsx
import React from "react";
import {
  SafeAreaView,
  StatusBar,
  Text,
  StyleSheet,
  TouchableOpacity,
  View,
  Switch,
} from "react-native";
import Icon from "react-native-vector-icons/Ionicons";
import { useTheme } from "./CustomComponents/Contexts";
import { useRouter } from "expo-router";
import { useThemeColors } from "./CustomComponents/CustomColor";

function Settings(props) {
  const { theme, toggleTheme } = useTheme();
  const Colors = useThemeColors();
  const router = useRouter();

  return (
    <SafeAreaView>
      <View
        style={[
          {
            marginTop: StatusBar.currentHeight,
            backgroundColor: Colors.Background,
          },
        ]}
      >
        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
          <TouchableOpacity
            onPress={() => router.push({ pathname: "dashboard" })}
          >
            <View style={[{ padding: 10 }]}>
              <Icon name="arrow-back" size={30} color={Colors.Primary} />
            </View>
          </TouchableOpacity>
          <Text style={[styles.sttingsText, { color: Colors.Primary }]}>
            Settings
          </Text>
        </View>
        <View style={[styles.settingContainer, {}]}>
          <View
            style={[
              styles.settingAttCard,
              {
                backgroundColor: Colors.Secondary,
                borderColor: Colors.Primary,
              },
            ]}
          >
            <Icon
              name={theme === "Light" ? "sunny" : "moon"}
              size={30}
              color={Colors.Primary}
              style={styles.icon}
            />
            <Text style={[styles.settingsAttText, { color: Colors.Primary }]}>
              Dark Mode
            </Text>

            <Switch
              value={theme === "Light"}
              onValueChange={toggleTheme}
              style={[
                styles.settingAttSwitch,
                { borderColor: Colors.Primary },
              ]}
            />
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

export default Settings;
const styles = StyleSheet.create({
  sttingsText: {
    fontSize: 24,
    fontWeight: "500",
  },
  settingContainer: { padding: 10, marginTop: 20 },
  icon: {
    justifyContent: "flex-start",
  },
  settingAttCard: {
    padding: 10,
    flexDirection: "row",
    borderRadius: 20,
    justifyContent: "space-between",
    borderWidth: 2,
    alignItems: "center",
    gap: 20,
  },
  settingsAttText: {
    fontSize: 20,
  },
  settingAttSwitch: {},
});

3. 重构CustomColor为自定义Hook

把themeHandler改成合法的自定义Hook，直接通过useTheme获取主题：

// CustomComponents/CustomColor.jsx
import { useTheme } from "./Contexts";

export function useThemeColors() {
  const { theme } = useTheme();
  return theme === "Light" ? CustomColor.Light : CustomColor.Dark;
}

export function useThemeIcon() {
  const { theme } = useTheme();
  return theme === "Light" ? "moon" : "sunny";
}

const CustomColor = {
  Light: {
    Primary: "#02C5C5",
    Secondary: "#F5F5F5",
    Third: "#D2E9E9",
    Background: "white",
  },
  Dark: {
    Primary: "#0B60B0",
    Secondary: "black",
    Third: "#40A2D8",
    Text: "white",
    Background: "#121212", // 修正Dark主题背景色，之前和Light一致不符合逻辑
  },
};

export default CustomColor;

4. 确保根组件包裹ThemeProvider

在expo-router的根布局文件_layout.jsx中添加：

// _layout.jsx
import { ThemeProvider } from "./CustomComponents/Contexts";

export default function RootLayout() {
  return (
    <ThemeProvider>
      {/* 其他路由组件 */}
    </ThemeProvider>
  );
}

关键改动说明 #

• 把ThemeContext改成带状态的全局Provider，所有需要主题的组件都能拿到实时更新的值。
• 用自定义Hook替代普通函数，符合React Hooks规则，确保组件能响应主题变化。
• 移除冗余的EventRegister，直接通过Context的toggleTheme方法更新主题，避免异步状态更新的问题。
• 修正Dark主题的Background颜色，让深色模式逻辑合理。

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