Y at-il un moyen d'enregistrer et de restaurer l'historique de navigation dans reac-navigation (react-native)

Question

J'ai un StackNavigator (1) avec 5 écrans. Après le 3ème écran je navigue dans un autre écran StackNavigator (2) et après une action sur le deuxième écran StackNavigator (2) je dois revenir à StackNavigator (1) 4ème écran et devrait pouvoir revenir à l'historique dans StackNavigator (1) à l'aide navigation.goBack()

Je suis en mesure de revenir à la pile StackNavigator (1) 4ème écran, mais quand je l'utilise navigation.goBack(), il ne va pas StackNavigator (1) 3ème écran

J'ai besoin de sauvegarder et restaurer l'historique de navigation dans StackNavigator (1).

Veuillez me faire savoir s'il y a un moyen d'y parvenir.

Answer 1

Utilisez StackNavigator.router.getStateForAction pour manipuler votre état d'itinéraire.

//assume your StackNavigator1 just like below 
    const StackNavigator1 = new StackNavigator({ 
     Screen1: {screen: Screen1}, 
     Screen2: {screen: Screen2}, 
     Screen3: {screen: Screen3}, 
     Screen4: {screen: Screen4}, 
     Screen5: {screen: Screen5} 
    }); 

    const defaultGetStateForAction = StackNavigator1.router.getStateForAction; 
    //store the state when navigate to screen3 
    let state3; 

    StackNavigator1.router.getStateForAction = (action, state) => { 

     let newState = defaultGetStateForAction(action, state); 
     //print out the state object 
     console.log(`newState: ${newState}`); 

     //change all the routeName 'Screen3', 'Screen4' to match your own project 
     if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'Screen3') { 
      //store the state of screen3 for restore it later 
      state3 = newState; 
     } 

     if (action.type === 'Navigation/NAVIGATE' && action.routeName === 'Screen4') { 
      //check if screen3 exist in the state, change the condition for your own need 
      let result = newState.routes.find((route) => { 
       return route.routeName === 'Screen3' 
      }); 
      //if 'screen3' doesn't exist, add it to the route manually 
      if (result === undefined && state3 !== undefined) { 
       let route4 = newState.routes[newState.index]; 
       let routes = state3.routes.slice(); 
       routes.push(route4); 
       return {index: 3, routes} 
      } 
     } 

     return defaultGetStateForAction(action, state) 
    }; 

//... the rest code