反应原生中的切换按钮

Question

Hi I have a problem with the switch button in react-native. I'm using it to toggle or not the activation of push notification. The problem is that if I quit the application, the state of the switch is getting back to false, it's not saving the state ? What am I doing wrong ?

Here is my code :

constructor(props) {
    super(props)

    this.state = {
        switchValue:false
    }
}

toggleSwitch = (value) => {
    this.setState({switchValue: value})
    if(this.state.switchValue){
        console.log("Unsubscribed")
    } else {
        console.log("Subscribed")
    }
}

render() {
    return (
    <SafeAreaView>
        <ScrollView>
            <View style = {styles.view_container}>
                <Text style = {styles.titre}>Notifications</Text>
                <Text style = {{marginTop:9}}>Permet de recevoir des alertes lorsque de nouvelles vidéos sont disponibles.</Text>

                <View style = {{marginTop: 30, justifyContent:"center", alignContent:"center"}}>
                    <View style = {styles.row}>
                        <View style = {styles.row_infos}>
                            <Image source={require('../Images/couleurs/icons8-belier-100.png')} style = {styles.image}/>
                            <Text style = {{fontWeight:"bold", fontSize:16,lineHeight:16, color:"#7c4dff"}}>Bélier</Text>
                        </View>
                        <Switch
                            onValueChange = {this.toggleSwitchBelier}
                            value = {this.state.switchValueBelier}
                            trackColor={{false:'#000000', true:'#7c4dff'}}
                        />
                    </View>
                 </View>
              </View>
           </ScrollView>
        </SafeAreaView>      
)}       

Answer 1

When you quit your Application, all saved variables in the state will be "resetted".

If you would like to keep the state of the toggle button, i would recommend you to use the AsyncStorage , provided by expo.

See here: https://docs.expo.io/versions/v36.0.0/react-native/asyncstorage/

Just set the item when the toggle-function is triggered like this:

import { AsyncStorage } from 'react-native';
AsyncStorage.setItem('buttonToggle', 'true');

And when you start the application again, load the current status from the AsyncStorage :

const value = await AsyncStorage.getItem('buttonToggle');
if (!!value && value === 'true'){
 // Do whatever you like
}