react-navigation StackNavigator 的reset用法

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 《達爾文所未知的》解說詞 撰寫(Written):阿爾芒·馬裏耶(The Animal Mother) 翻譯(Tr...
    JENTSON阅读 1,462评论 0 1
  • 有个爱你的人不容易
    生化阅读 144评论 0 0
  • 梅子: 窗外,小鸟叽叽喳喳地叫着,偶尔传来别栋楼层里的人声。锅里炖着猪蹄花生汤,咕咚咕咚有节奏地响着。而我在给你写...
    饮笑阅读 220评论 0 0
  • 时隔5年老公出轨的事情再次发生了!不同于第一次的是:此时此刻的我已怀二宝7个月;没有第一次知道的那么惊慌失措;没...
    clovebaby阅读 243评论 0 0
  • 文/文子先生 橘黄色的路灯下 我呆呆地看着 两位可爱的人 已悄悄的走远 满脸微笑的老太太 小心的捧着一束康乃馨 倔...
    文子先生阅读 295评论 0 3