如何使用React Native Appearance和useColorScheme更改应用主题？

核心思路 #

Appearance 和 useColorScheme 本身仅能读取系统默认主题（浅色/深色），要实现手动切换主题，需要结合状态管理（比如 React Context、Redux）来覆盖系统主题值，让组件根据自定义状态渲染对应样式。

具体实现步骤 #

1. 创建主题上下文（Context） #

用 React Context 全局管理主题状态，方便所有组件访问和更新：

import React, { createContext, useContext, useState, useEffect } from 'react';
import { Appearance, AsyncStorage } from 'react-native';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  // 初始化主题：优先取本地存储的自定义主题，无则用系统主题
  const [theme, setTheme] = useState(() => {
    const savedTheme = await AsyncStorage.getItem('app-theme');
    return savedTheme || Appearance.getColorScheme();
  });

  // 监听系统主题变化（仅在无自定义主题时跟随系统）
  useEffect(() => {
    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
      const checkSavedTheme = async () => {
        const savedTheme = await AsyncStorage.getItem('app-theme');
        if (!savedTheme) setTheme(colorScheme);
      };
      checkSavedTheme();
    });

    return () => subscription.remove();
  }, []);

  // 切换主题并持久化
  const toggleTheme = async () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    await AsyncStorage.setItem('app-theme', newTheme);
  };

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

// 自定义Hook简化主题获取
export const useTheme = () => useContext(ThemeContext);

2. 定义主题样式配置 #

抽离不同主题下的样式变量，统一管理：

export const themeConfigs = {
  light: {
    bgColor: '#ffffff',
    textColor: '#1a1a1a',
    primaryColor: '#2563eb',
    borderColor: '#e5e7eb',
  },
  dark: {
    bgColor: '#121212',
    textColor: '#f3f4f6',
    primaryColor: '#60a5fa',
    borderColor: '#374151',
  },
};

3. 在组件中使用主题 #

通过自定义 Hook 获取主题，动态应用样式：

import { View, Text, Button, StyleSheet } from 'react-native';
import { useTheme } from './ThemeProvider';
import { themeConfigs } from './themeConfigs';

const HomePage = () => {
  const { theme, toggleTheme } = useTheme();
  const currentTheme = themeConfigs[theme];

  return (
    <View style={[styles.container, { backgroundColor: currentTheme.bgColor }]}>
      <Text style={{ color: currentTheme.textColor, fontSize: 22 }}>当前主题：{theme}</Text>
      <Button 
        title="切换主题" 
        onPress={toggleTheme}
        color={currentTheme.primaryColor}
        style={styles.toggleBtn}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  toggleBtn: {
    marginTop: 30,
  },
});

export default HomePage;

4. 全局包裹主题 Provider #

在 App 根组件外层包裹 ThemeProvider，让所有子组件都能访问主题状态：

import { ThemeProvider } from './ThemeProvider';
import HomePage from './HomePage';

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

export default App;

关键说明 #

• 若使用 Redux、Zustand 等状态管理库，思路一致：将主题状态存入全局 store，通过 action 触发主题切换，组件从 store 读取主题值即可。
• 持久化存储建议用 MMKV 替代 AsyncStorage，读写性能更优。

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