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>
    )
  }
}

- Aure R

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>
    )
  }
}

- jmancherje

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>
        )
      }
    }

- Victor

---

如果这么简单，我不认为会有人问。那么如果在FlatList中切换开关或在.map(function(){})中呢？ - Alan Yong

Answer 3

你可以尝试以下方法，你可以保留开关状态数组，例如在示例中使用了关联键，但你可以根据需要更改为多级开关状态。(代码格式可能有误，请见谅，但这能让你理解思路)

constructor(props) {
super(props);
this.state = {
  switchStates: {
    companyName: true
  }
}
}

toggle(item, index) {
const switchStates = this.state.switchStates;
switchStates[index] = !switchStates[index];
console.log(switchStates);
this.setState({ switchStates });}

渲染开关

<Switch
    onValueChange={isSwitchOn =>
    this.toggle({ isSwitchOn }, "companyName")
    }
    value={this.state.switchStates.companyName}
/>

- engr.waqas