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

Question

我正在制作一个计算器，在单个屏幕上有多个开关（使用反应原生开关）。根据启用或禁用的开关，我想编写一个 if/else 语句。在我的 if/else 语句中，我想访问开关的值，无论它是打开还是关闭。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});
}

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

这里