React Native：点击切换开关后如何修改View背景色

你的代码里有几个关键问题导致背景色不变化：

• View组件不存在onValueChange属性：你给外层View添加的这个属性是无效的，React Native的View组件没有该事件，直接删除即可。
• Switch的事件处理错误：React Native的Switch组件没有onClick事件，应该用onValueChange响应切换操作；同时当前的切换逻辑只修改了isEnabled状态，没有关联背景色的变化逻辑。

修复方案一：切换开关时同步修改颜色状态 #

在toggleSwitch函数里根据开关的新状态设置对应的背景色，每次切换都会同步更新颜色：

import { StyleSheet, View, Switch} from 'react-native';
import React, {useState} from 'react';

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const [color, setColor] = useState('yellow');

  const toggleSwitch = () => {
    const newState = !isEnabled;
    setIsEnabled(newState);
    // 根据开关状态切换背景色
    setColor(newState ? 'grey' : 'yellow');
  };

  return (
    <View style={[styles.container, {backgroundColor: color}]}>
      <Switch 
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

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

修复方案二：直接根据isEnabled动态计算背景色（无需单独维护color状态） #

如果不需要单独的color状态，可以直接在style中根据isEnabled的值动态设置背景色，简化代码结构：

import { StyleSheet, View, Switch} from 'react-native';
import React, {useState} from 'react';

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(prev => !prev);

  return (
    <View style={[
      styles.container, 
      {backgroundColor: isEnabled ? 'grey' : 'yellow'}
    ]}>
      <Switch 
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

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

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