web-dev-qa-db-fra.com

Déconnexion en utilisant réagit Native DrawerNavigator

Je construis une application réactive ( Image de l'application ) qui possède un lien de déconnexion sur le navigateur de tiroir.

Le code est comme ci-dessous 

 const DrawerScreen = DrawerNavigator({
    ..........
    logout: {
        screen: Component   
    },
})

export default DrawerScreen;

Mais le problème est que cela ne fait que charger l'écran du composant. J'ai besoin d'appeler une méthode où je peux effectuer Asyncstorage clear et naviguer à LoginPage.

react-nativenavigation-drawerlogoutreact-navigation
3
Gouranga Panigrahi

Vous voudrez probablement ajouter un bouton à votre tiroir. Si c'est le cas, votre code ressemblera à ceci.

const Drawer = DrawerNavigator(
{
    mainpage:{screen:MyScreen}
},
{
    contentComponent:(props) => (
        <View style={{flex:1}}>
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {...props} />
                <Button title="Logout" onPress={DO_SOMETHING_HERE}/>
            </SafeAreaView>
        </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
})

Vous devez importer import {DrawerItems} from 'react-navigation'; pour le faire fonctionner.

12
Bright Lee

Vous pouvez utiliser la classe Component pour effectuer un Asyncstorage vide et naviguer dans la page de connexion. Si vous utilisez react-navigation, this.props a un objet de navigation. 

class YourComponent extends Component {
    constructor(props) {
        super(props);
     }

    componentWillMount() {
        Asyncstorage.clear();
        this.props.navigation.navigate('LoginPage')
    }
}
export default YourComponent;
1
mefallit
const DrawerNavigation = createDrawerNavigator(
  {
    Mainpage: {
      screen: Mainpage
    }
  },
  {
    contentComponent:(props) => (
      <View style={{flex:1}}>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
            <DrawerItems {...props} />
            <TouchableOpacity onPress={()=>
              Alert.alert(
                'Log out',
                'Do you want to logout?',
                [
                  {text: 'Cancel', onPress: () => {return null}},
                  {text: 'Confirm', onPress: () => {
                    Asyncstorage.clear();
                    props.navigation.navigate('Login')
                  }},
                ],
                { cancelable: false }
              )  
            }>
              <Text style={{margin: 16,fontWeight: 'bold',color: colors.textColor}}>Logout</Text>
            </TouchableOpacity>
          </SafeAreaView>
      </View>
    ),
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
);
1
Bennet roy

Utilisez simplement AlertView bro qui vous aidera, mais dans l'exemple ci-dessus, si vous avez un en-tête supérieur à this (this.props.navigation.navigate ('LoginPage'))

ne fera pas sens

votre vue se chargera sous l'en-tête

0
kunal pal

Vous pouvez créer un modal qui le fera pour vous. Après avoir cliqué sur logout -> afficher le modal à l'aide d'un attribut visible et cliqué sur oui, fermer le modal -> accéder à l'écran de connexion.

0
Rigorous implementation