React Native多个开关

Question

在React-Native上，我试图创建一个包含多个开关组件的屏幕，并且可以一次只选择一个。当组件加载时，只有第一个开关打开。如果你点击它，它会关闭，但如果你打开另一个，所有其他的都会关闭。

我不知道我在这里有正确的方法，因为我很困惑如何使用组件状态来做到这一点。在JS中，我会做一些类似于将所有开关关闭的功能，但是打开点击的开关，但我不明白如何使用状态。

在此先感谢

import React from 'react' 
import { ScrollView, Text, View, Switch } from 'react-native' 

class switchScreen extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     trueSwitchIsOn: true, 
     falseSwitchIsOn: false 
    } 
    } 

    switch = (value) => { 
    this.setState({ falseSwitchIsOn: value, trueSwitchIsOn: !value }) 
    } 

    render() { 
    return (
     <View> 
     <Switch 
      onValueChange={this.switch} 
      value={this.state.trueSwitchIsOn} 
     /> 
     <Switch 
      onValueChange={this.switch} 
      value={this.state.falseSwitchIsOn} 
     /> 
     <Switch 
      onValueChange={this.switch} 
      value={this.state.falseSwitchIsOn} 
     /> 
     </View> 
    ) 
    } 
} 

Answer 1

我相信一个更优化的解决方案将减少状态的数量，和不一致的数据的可能性。使用一个状态变量来跟踪哪个开关处于活动状态（如果有的话）可以很容易地解决您的问题。

import React from 'react' 
import { ScrollView, Text, View, Switch } from 'react-native' 

class switchScreen extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     activeSwitch: null, 
    } 
    } 

    // A simple toggle method that takes a switch number 
    // And toggles it between on/off 
    toggleSwitch = (switchNumber) => { 
    this.setState({ 
     activeSwitch: switchNumber === this.state.activeSwitch ? null : switchNumber 
    }) 
    }; 

    // 
    switchOne = (value) => { this.toggleSwitch(1) }; 
    switchTwo = (value) => { this.toggleSwitch(2) }; 
    switchThree = (value) => { this.toggleSwitch(3) }; 

    render() { 
    return (
     <View> 
     <Switch 
      onValueChange={this.switchOne} 
      value={this.state.activeSwitch === 1} 
     /> 
     <Switch 
      onValueChange={this.switchTwo} 
      value={this.state.activeSwitch === 2} 
     /> 
     <Switch 
      onValueChange={this.switchThree} 
      value={this.state.activeSwitch === 3} 
     /> 
     </View> 
    ) 
    } 
} 

Answer 2

import React from 'react' 
    import { ScrollView, Text, View, Switch } from 'react-native' 

    class switchScreen extends React.Component { 
     constructor (props) { 
     super(props) 
     this.state = { 
      switchone:false, 
      switchtwo:false, 
      switchthree:false, 

     } 
     } 

     switchOne = (value) => { 
     this.setState({ switchone: !value, 
     switchtwo:false,switchthree:false, 
     }) 
     } 
switchTwo = (value) => { 
     this.setState({ switchtwo: !value, 
     switchone:false,switchthree:false, 
     }) 
     } 
switchThree = (value) => { 
     this.setState({ switchtree: !value, 
     switchone:false,switchtwo:false, 
     }) 
     } 

     render() { 
     return (
      <View> 
      <Switch 
       onValueChange={this.switchOne} 
       value={this.state.switchone} 
      /> 
      <Switch 
       onValueChange={this.switchTwo} 
       value={this.state.switchtwo} 
      /> 
      <Switch 
       onValueChange={this.switchThree} 
       value={this.state.switchthree} 
      /> 
      </View> 
     ) 
     } 
    }