Expo React Native：如何通过代码轻松切换应用配色方案？

完全可以用你说的onChange={() => { toggleDarkMode(); }}这种方式实现，下面是针对你用Navigation (TypeScript)模板创建的项目的具体实现步骤：

核心思路 #

默认情况下项目会跟随系统主题切换，我们需要手动管理主题状态，覆盖系统默认行为，同时持久化用户的主题选择，避免重启后重置。

1. 准备主题配置 #

在项目里创建一个主题配置文件，比如src/theme.ts：

import { DefaultTheme, DarkTheme } from '@react-navigation/native';

export const LightTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    // 可自定义浅色主题颜色
    background: '#ffffff',
    text: '#121212',
  },
};

export const DarkThemeConfig = {
  ...DarkTheme,
  colors: {
    ...DarkTheme.colors,
    // 可自定义深色主题颜色
    background: '#121212',
    text: '#ffffff',
  },
};

2. 在App.tsx中管理主题状态 #

修改App.tsx，引入AsyncStorage持久化主题，同时实现切换函数：

import { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { LightTheme, DarkThemeConfig } from './src/theme';
import HomeScreen from './screens/HomeScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  // 初始化读取本地保存的主题设置
  useEffect(() => {
    const loadTheme = async () => {
      const savedTheme = await AsyncStorage.getItem('isDarkMode');
      if (savedTheme !== null) {
        setIsDarkMode(savedTheme === 'true');
      }
    };
    loadTheme();
  }, []);

  // 实现主题切换函数
  const toggleDarkMode = async () => {
    const newMode = !isDarkMode;
    setIsDarkMode(newMode);
    await AsyncStorage.setItem('isDarkMode', newMode.toString());
  };

  return (
    <NavigationContainer theme={isDarkMode ? DarkThemeConfig : LightTheme}>
      <Stack.Navigator>
        {/* 将切换函数传递给目标屏幕 */}
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          initialParams={{ toggleDarkMode }} 
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. 在屏幕中添加深色模式开关 #

以HomeScreen.tsx为例，添加Switch组件并绑定切换逻辑：

import { View, Switch, Text, StyleSheet } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { useTheme } from '@react-navigation/native';

type RootStackParamList = {
  Home: { toggleDarkMode: () => void };
};

type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>;

export default function HomeScreen({ route }: HomeScreenProps) {
  const { toggleDarkMode } = route.params;
  const { colors } = useTheme();
  // 通过主题颜色判断当前模式，用于Switch的value属性
  const currentIsDark = colors.background === '#121212';

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Text style={{ color: colors.text }}>深色模式开关</Text>
      <Switch
        value={currentIsDark}
        onChange={() => { toggleDarkMode(); }}
      />
    </View>
  );
}

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

补充说明 #

• 用useTheme钩子可以在任意组件中获取当前主题的颜色配置，方便同步组件样式
• 持久化存储用AsyncStorage足够，若需要更高安全性，可替换为expo-secure-store

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