有没有什么办法保存和恢复反应导航中的导航历史记录(react-native)
问题描述:
我有一个5个屏幕的StackNavigator(1)。在第三屏幕后,我正在导航到另一个StackNavigator(2)屏幕,并且在第二个StackNavigator(2)屏幕上执行了一些操作后,我需要返回Stack Stack Navigator(1)第四屏幕,并且应该能够返回到StackNavigator中的历史记录( 1)使用navigation.goBack()有没有什么办法保存和恢复反应导航中的导航历史记录(react-native)
我能够回来堆栈StackNavigator(1)第四屏幕,但是当我使用navigation.goBack()它不会StackNavigator(1)第三屏
我需要在StackNavigator(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