Je développe une application native React à des fins d'apprentissage. J'implémente maintenant la navigation à l'aide de React Navigation. J'utilise la navigation dans la pile. Mais je ne trouve pas de moyen de supprimer l'écran précédent de l'historique de navigation et de tuer l'application.
J'ai configuré ma navigation comme ça.
this.props.navigation.navigate('Events');
Comme vous pouvez le voir dans le code ci-dessus, j'ouvre l'écran de connexion par défaut. Après la connexion, j'ouvre l'écran des événements comme celui-ci.
const AppStack = createStackNavigator({
Login: {
screen: Login
},
Register: {
screen: Register
},
Events: {
screen: Events
}
});
Le problème est que, lorsque je suis sur la page des événements, je peux voir le bouton de retour dans la barre de navigation. Lorsque j'appuie dessus, je suis ramené à la page de connexion.
Mais ce que je veux, c'est qu'après la connexion, je souhaite supprimer la page de connexion de la pile. Lorsque je suis sur la page des événements, lorsque je clique sur le bouton de retour, l'application doit être fermée. Peut-être qu'il n'a pas le bouton de retour. Il agira simplement comme un premier écran dans ce cas. Comment puis je faire ça?
5 Réponses :
Ce dont vous avez besoin est la fonctionnalité de réinitialisation
import {NavigationActions} from 'react-navigation';
this.props.navigation.dispatch(NavigationActions.reset({
index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'Events' })]
}));
Lorsque la connexion ou l'enregistrement est terminé avec succès, vous devez réinitialiser votre pile de navigation comme ci-dessous,
static navigationOptions = navigation => ({
header: null
});
et en plus dans votre page Event vous devez ajouter une méthode statique si vous ne voulez pas d'en-tête.
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Events' })],
});
this.props.navigation.dispatch(resetAction)
J'espère que cela vous aidera.
@Wai Yan Hein Acceptez la réponse si cela a résolu votre problème afin que d'autres personnes obtiennent de bonnes réponses dans les utilisations futures.
Salut, cela résout le problème. Mais puis-je demander plus? Il n'ouvre pas la page des événements avec une animation. Normalement, il ouvre le nouvel écran avec une animation de diapositives dans IOS.
si vous réinitialisez la pile, elle ne peut pas s'animer. l'animation fonctionne uniquement avec navigation.navigate
import {StackActions, NavigationActions} from 'react-navigation';
this.props.navigation.dispatch(StackActions.reset({
index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'Events' })]
}));
Bien que cette réponse puisse être à jour ou répondre à la question sans aucune explication, elle reste une réponse de faible qualité. Veuillez fournir des explications afin de permettre aux autres d'en tirer des leçons.
À partir de la version V5
this.props.navigation.reset({
index: 0,
routes: [{name: 'Events'}],
});
Dans V5.x, nous avons une méthode de reset
navigation.reset({
index: 0,
routes: [{ name: 'ScreenName' }],
});