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

UITableViewController

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 = {
      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 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}
/>

React Native多个交换机

3 个答案: