在React Native中访问切换开关状态

Question

我正在做一个计算器，在一个屏幕上有多个开关（使用react-native开关）。 根据要启用或禁用的开关，我想编写一条if / else语句。 在我的if / else语句中，我想访问Switch的值，无论它是打开还是关闭。 Facebook React Native Switch页面没有明确说明我如何使用该开关并传递信息。

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Switch,
  TextInput,
  Alert
} from 'react-native';



export class TimiCalculator extends Component {


constructor(props) {
  super(props);
  this.state = { SwitchValue: false };
}

render() {
  return (
   <View style={styles.container}>
    <Switch 
      onValueChange={(value) => this.setState({SwitchValue: value})}
      value={this.state.SwitchValue} />
  </View>

    <TouchableOpacity style={styles.buttonCalculate} onPress={this.showCalculation}>
    <Text style={styles.title}> Calculate </Text>
    </TouchableOpacity>

  </View>
  );
}

showCalculation() {

if (ACCESS_STATE_OF_TOGGLE_SWITCH_HERE == true) {
*DO THIS
} else {
*DO THIS INSTEAD
}

Alert.alert('Your output is' + answer)
}

}

Answer 1

我建议您阅读https://facebook.github.io/react-native/docs/state.html，因为状态是React开发的基础知识。 在这种情况下，您不知道如何引用状态。

这是最简短最干净的答案

import React, { Component } from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  Switch,
} from 'react-native';

export class TimiCalculator extends Component {
  state = {isSwitchOn: false}

  showCalculation = () => {
    if (this.state.isSwitchOn) {
      // do something
    } else {
      // do something else
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Switch 
          onValueChange={isSwitchOn => this.setState({isSwitchOn})}
          value={this.state.isSwitchOn} 
        />
        <TouchableOpacity style={styles.buttonCalculate} onPress={this.showCalculation}>
          <Text style={styles.title}> Calculate </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 2

showCalculation() {

if (this.state. SwitchValue == true) {
//do here what you want 
this.setState({SwitchValue:false});
} else {

this.setState({SwitchValue: true});

}

如果要实现计算器，我建议您使用此代码。

这里