https://reactnavigation.org/docs/en/navigation-prop.html#reset
應用場景:
由Page1跳轉到Page2,在Page2再跳轉到Page3,在Page3返回時直接回到Page1
實現:Page1頁面navigate跳轉至Page2,在Page2跳轉至Page3時重置路由
//路由配置
import { createAppContainer } from "react-navigation"
import { createStackNavigator } from "react-navigation-stack"
import Page1 from "xxx"
import Page2 from "xxx"
import Page3 from "xxx"
const AppNavigator = createStackNavigator({
Page1: {
screen: Page1,
},
Page2: {
screen: Page2,
},
Page3: {
screen: Page3,
}
});
export default createAppContainer(AppNavigator);
//Page1.js
this.props.navigation.navigate("Page2") //導航至Page2
//Page2.js
import { StackActions, NavigationActions } from "react-navigation"
const resetAction = StackActions.reset({
index: 1,
actions: [
NavigationActions.navigate({ routeName: 'Page1' }),
NavigationActions.navigate({ routeName: 'Page3', params: {}})
]
});
this.props.navigation.dispatch(resetAction) //導航至Page3,重置路由
參考:https://reactnavigation.org/docs/en/stack-actions.html#reset