アクセストグルスイッチの状態がネイティブで

Question

私は電卓を作っていますが、1つの画面に複数のスイッチがあります（反応ネイティブスイッチを使用しています）。どのスイッチが有効か無効かに応じて、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を読んですることをお勧めいたします。この場合、あなたは状態を参照する方法を知らなかった。ここで

は、私は状態を参照する方法を知っているために必要な、そうだね、最も短いとcleaniest答え

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

} 

私はあなたが電卓を実装したい場合は、このコードを見て使用することをお勧めします。

here