如何在React Native中使用Switch开关切换APP按钮颜色并实现跨页配色控制

一、当前页面按钮随开关变色 #

你已经声明了isEnabled状态监听开关的激活状态，直接将按钮的背景色绑定这个状态做动态判断即可，修改按钮的style属性：

<TouchableOpacity style={{
  // 开关激活时替换为你需要的按钮色即可
  backgroundColor: isEnabled ? "#2ecc71" : "red", 
  marginTop: 50
}}>
  <Text>
    Deneme Buton
  </Text>
</TouchableOpacity>

替换原来写死的backgroundColor: "red"即可实现当前页面按钮随开关切换变色。

二、跨页面同步控制配色 #

你现在的isEnabled是当前组件的内部状态，其他页面无法访问，需要将这个状态提升为全局状态，常用实现方案可选以下两种：

方案1：使用React内置Context API（无第三方依赖） #

适合中小项目，不需要额外安装依赖：

1. 新建全局主题Context文件theme-context.js

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

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [isEnabled, setIsEnabled] = useState(false);

  // 初始化时读取本地存储的开关状态，重启APP也能保留设置
  useEffect(() => {
    const getSavedSetting = async () => {
      const savedValue = await AsyncStorage.getItem('themeSwitchEnabled');
      if(savedValue) setIsEnabled(JSON.parse(savedValue));
    }
    getSavedSetting();
  }, []);

  const toggleSwitch = async () => {
    const newState = !isEnabled;
    setIsEnabled(newState);
    // 切换时同步更新本地存储
    await AsyncStorage.setItem('themeSwitchEnabled', JSON.stringify(newState));
  };

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

// 自定义Hook方便所有页面调用全局状态
export function useTheme() {
  return useContext(ThemeContext);
}

2. 在项目根组件（一般是App.js）包裹Provider

import { ThemeProvider } from './theme-context';

export default function App() {
  return (
    <ThemeProvider>
      {/* 原有项目的导航容器/根路由组件 */}
    </ThemeProvider>
  );
}

3. 修改你的设置页面代码，用全局状态替换内部state

import { useTheme } from './theme-context';

export function SettingsAccountScreen(props) {
  const { navigate } = props.navigation;
  // 替换原有的内部state声明
  const { isEnabled, toggleSwitch } = useTheme();

  return(
    <SafeAreaView>
      <View style = {styles.container}>
        <TouchableOpacity onPress ={() => {navigationService.navigate('MyAccount', null);} 
        }>
          <Image style= {styles.imageSt} source={require('../../assets/arrow-left-circle.png')} />
        </TouchableOpacity>
        <View style = {styles.textView}>
          <Text style = {styles.textStyle}>Uygulama Ayarları</Text>
        </View>
      </View>
      <View style={styles.container}>
        <Switch
          trackColor={{ false: "#767577", true: "#81b0ff" }}
          thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
          ios_backgroundColor="#3e3e3e"
          onValueChange={toggleSwitch}
          value={isEnabled}
        />
      </View>
      <View>
        <TouchableOpacity style={{
          backgroundColor: isEnabled ? "#2ecc71" : "red", 
          marginTop: 50
        }}>
          <Text>
            Deneme Buton
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  )}

4. 其他任意页面需要同步配色时，直接调用useTheme() Hook获取isEnabled状态即可：

// 其他页面示例
import { useTheme } from './theme-context';

function OtherPage() {
  const { isEnabled } = useTheme();
  return (
    <View style={{backgroundColor: isEnabled ? '#e3f2fd' : 'white'}}>
      <Text style={{color: isEnabled ? '#1565c0' : 'black'}}>其他页面内容</Text>
    </View>
  )
}

方案2：使用第三方状态管理库 #

如果你的项目已经接入了Zustand、Redux、MobX等状态管理工具，直接将isEnabled状态和切换方法存入全局Store即可，逻辑和Context方案一致，状态读写调用对应库的API即可。

内容的提问来源于stack exchange，提问作者Şahan Hasret