有沒有什麼辦法保存和恢復反應導航中的導航歷史記錄（react-native）

Question

我有一個5個屏幕的StackNavigator（1）。在第三屏幕後，我正在導航到另一個StackNavigator（2）屏幕，並且在第二個StackNavigator（2）屏幕上執行了一些操作後，我需要返回Stack Stack Navigator（1）第四屏幕，並且應該能夠返回到StackNavigator中的歷史記錄（ 1）使用navigation.goBack（）

我能夠回來堆棧StackNavigator（1）第四屏幕，但是當我使用navigation.goBack（）它不會StackNavigator（1）第三屏

我需要在StackNavigator（1）中保存和恢復導航歷史記錄。

請讓我知道有什麼辦法來實現這一點。

Answer 1

使用StackNavigator.router.getStateForAction來操縱你的路由狀態。

//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