6
votes

react-navigation 3 réinitialisé dans la pile imbriquée

J'essaie de comprendre comment réinitialiser dans la pile imbriquée ceci mon code

const resetAction = StackActions.reset({
        index: 0,
        key: null,
        actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
    });
    this.props.navigation.dispatch(resetAction);

TabStack

const resetAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
    });
    this.props.navigation.dispatch(resetAction);

Je veux comprendre comment faire une réinitialisation par exemple:

    reset from UserProfile to TabStack (in AppStack) to AuthStack

react-native react-navigation react-native-navigation

4 commentaires

Double possible de React Native en naviguant entre Nested StackNavigator

@JaydeepGalani J'ai essayé cette solution, ne fonctionnant pas, elle montre la même erreur.

Vérifiez le nom de votre route, il devrait être Auth au lieu de AuthStack comme déclaration :) Et réinitialiser avec la clé null fonctionnera car cela réinitialisera le navigateur racine.

J'ai fait comme vous pouvez le voir ici, même erreur pastebin.com/hvJ7Mp7b

3 Réponses :

1
votes

Essayez de le définir sur AppStack , car de toute façon, il va rediriger vers GeneralStack car vous l'avez en tant que initialRouteName dans AppStack

const resetAction = StackActions.reset({
      index: 0,
      key: null,
      actions: [NavigationActions.navigate({ routeName: 'App' })],
    });
    this.props.navigation.dispatch(resetAction);

7 commentaires

Que voulez-vous dire? Je veux réinitialiser de userProfile de tabstack à screenA de authstack .. comment faire cela?

Mais en question, vous essayez de le réinitialiser sur GeneratStack au lieu de AuthStack

J'essaie de faire quelques réinitialisations, la dernière que je vous demande est d'implémenter la déconnexion .. une idée?

Dans ce cas, vous pouvez le réinitialiser directement sur Auth

J'ai essayé de réinitialiser de UserProfile de tabStack à screenA de AuthStack avec ce code pastebin.com/hvJ7Mp7b . J'obtiens la même erreur "erreur: erreur: il n'y a pas d'itinéraire défini pour la clé Auth. Doit être l'un des" TabStack, .... "

@ J'édite mon message avec de vrais noms pour le rendre plus facile à comprendre. vérifier à nouveau - Adir Zoari il y a 9 minutes Supprimer

@RaviRupareliya, dans mon cas, MainNav est StackNav, j'ai également un switchNav à l'intérieur, puis un StackNav dans le switchNav. Je veux reposer le stackNav interne dans certaines situations, mais cela échoue. il semble que la pile externe va se réinitialiser et parce que je passe l'un des cheminName interne de StackNav, il ne peut pas le trouver sur stackNav externe. J'ai un fichier util NavigationService comme vous le publiez dans votre réponse. avez-vous une idée comment puis-je résoudre ce problème?

0
votes

Vous pouvez faire ce qui suit, pour réinitialiser à authStack ,

créer une action de réinitialisation comme suit,

  const AppStack = createStackNavigator(
  {
    TabStack,
    SearchResult,
    BusinessDetail,
    BusinessMap,
    MakeAppointment,
    TermsAndConditions,
    AuthStack <---Insert THIS
  },

et également ajouter le AuthStack dans appStack, ou la pile à partir de laquelle vous appelez le code ci-dessus.

Par exemple, si vous appelez ceci depuis votre pile d'applications, ajoutez la ligne suivante comme route dans votre pile d'applications

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "AuthStack" })],
  key: null
});
this.props.navigation.dispatch(resetAction);

Cela fonctionne pour moi lorsque je me déconnecte.

1 commentaires

Je connais ce genre de méthode mais je ne pense pas que ce soit la bonne façon ... parce que si je veux réinitialiser dans des piles plus complexes, je dois toujours le déclarer au même niveau de pile ...

4
votes

Votre resetAction échoue car vous l'envoyez sur TabStack (car vous appelez this.props.navigation.dispatch sur UserProfile , si je vous comprends bien). Vous devez plutôt envoyer resetAction à votre MainStack . Ce fil de discussion a suggéré des moyens pour y parvenir. Et aussi, voici ma solution préférée, car je n'ai pas à passer d'accessoires autour des navigateurs ou à appeler plusieurs actions imbriquées avec cela.

Créez un navigationService.js avec le contenu suivant (pour garder votre navigateur de premier niveau comme référence)

function navigateAndReset(routeName, params) {
  _navigator.dispatch(
    StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName,
          params,
        }),
      ],
    })
  );
}

Sur votre App.js ou tout autre fichier dans lequel vous affichez votre MainStack , procédez comme suit pour définir la référence

NavigationService.navigateAndReset('Auth', {...yourParamsIfAny});
// 'Auth' because you named it that way in your 'MainStack'

Et partout où vous souhaitez réinitialiser votre AuthStack (ou toute autre pile de votre MainStack ), il vous suffit d'importer NavigationService et d'appeler

import NavigationService from './navigationService';

...

render() {
  return (

    ...
    <MainStack
      ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }}
    />
    ...

  )
}

=================================== ========================================

Modifié h1>

La solution précédente, dans navigationService.js , est pour StackNavigator comme MainStack

import { NavigationActions, StackActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigateMainNavigator(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    }),
  );
}

// add other navigation functions that you need and export them

export default {
  setTopLevelNavigator,
  navigateMainNavigator,
};

7 commentaires

hey wicky, ça sonne comme un excellent moyen de faire ça! J'utilise avec mobx donc je l'ai fait dans mon magasin, je copie une partie de mon code ici, vous pouvez voir pastebin.com/KtnMAXYy J'ai également imprimé la référence pour voir ce qu'elle contient et voir toutes ses propriétés. mais j'ai toujours la même erreur .. peut-être que quelque chose me manque ..

Hey Adir, je ne connais pas mobx. Mais essayez de faire un conosle.log (this.main_navigation_ref) sur votre fonction resetMainStack , et vérifiez si vous êtes sur le bon navigateur. Essayez de rechercher les itinéraires du navigateur, cette image pourrait vous aider

vous pouvez voir le console.log ici imgur.com/a/tWhfMHA il me montre le mainStack

Ahh, je viens de réaliser que votre MainStack est en fait un SwitchNavigator . Dans ce cas, vous n'avez pas besoin de l'action StackActions.reset . Seul le NavigationActions.navigate fera l'affaire. J'ai mis à jour ma réponse ci-dessus

exactement ce dont j'ai besoin !!!! quelle est la différence entre stack actions.reset to NavigationActions?

Gald ça aide. StackActions.reset (avec index: 0 ) consiste à réinitialiser la pile de votre StackNavigator , de sorte que lorsque vous poussez un nouvel écran en utilisant NavigationActions.navigate , le nouvel écran sera le premier écran du StackNavigator . Sans StackActions.reset , il poussera le nouvel écran au-dessus de la pile, que vous pouvez toujours revenir à l'écran précédent en utilisant le bouton retour ou glisser gauche . Puisque votre MainStack est un SwitchNavigator mais pas un StackNavigator , vous n'avez pas besoin de réinitialiser la pile.

continuons cette discussion dans le chat .