React-native：如何在单击切换开关后更改查看背景颜色

Question

I am trying to change the Background Color of the entire View by a toggle switch. But the color is not changing. Please help and Big Thanks!

Here is my code.

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

export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
const [color, setColor] = React.useState('yellow');

  return (
    <View style={[styles.container,
                 {backgroundColor:color}]}
          onValueChange = {color => setColor(color)}>

      <Switch onValueChange={toggleSwitch}
              value={isEnabled} onClick={() => setColor('grey')}>
      </Switch>

    </View>
  );
}

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

Answer 1

You need to add conditional styling on the view where you want the color to be changed. Keep it simple and not confuse it. It would be something like this.

    const [isYellow, setIsYellow] = useState(false)

  return (
      <View style={isYellow ? {backgroundColor: 'yellow'} : {backgroundColor: 'grey'} }>
        <Switch onValueChange={() => setIsYellow(prevYellow => !prevYellow)}
              value={isEnabled}>
        </Switch>
    </View>

Answer 2

You need to define what happens when switch is enabled and what happens when switch is disabled. If enabled (conditional styling) background will be yellow, if not it'll be grey.

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

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

  return (    
    <View style={[styles.container, color  ? styles.bgyellow : styles.bggrey]}>
      <Switch onValueChange={toggleSwitch}
              value={isEnabled} onClick={() => setColor(!color)}>
      </Switch>
    </View>
  );
}

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

Answer 3

If you just want to change the Bg-color to grey.

 const [color, setColor] = useState('yellow'); const [isEnabled, setIsEnabled] = useState(false); return( <View style={[styles.container, {backgroundColor: color}]}> <Switch onValueChange={() => { setIsEnabled(;isEnabled); setColor('grey'); }} value={isEnabled}></Switch> </View> )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

---

If you want to change the Bg-color to "grey" when Switch is disabled and "yellow" when the Switch is enabled

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>