React Navigation:返回栈顶S1且禁用返回至A3的方案问询
你的问题核心是:当前导航栈是 S0 → S1 → A1 → A2 → A3,直接用navigate("S1")会在栈中新增一个S1实例,导致返回时回到A3;而你需要的是回到原来的S1实例,同时保留S1→S0的返回链路。
下面是两种可行的方案:
方案1:通过计算弹出步数使用pop()
如果你能确定从A3到S1需要弹出的页面数量(当前栈中A3、A2、A1共3个页面),可以直接调用:
this.props.navigation.pop(3);
这个方法会从当前页面往上弹出指定数量的页面,直接回到之前的S1实例,此时S1的上一页还是S0,完全符合你的需求。
方案2:动态查找S1路由并重置栈(更通用)
如果导航栈的结构可能变化(比如从其他页面跳转过来,步数不确定),可以通过导航状态动态找到S1的位置,然后重置栈到S0→S1的状态:
const navState = this.props.navigation.dangerouslyGetState(); // 找到栈中S1的路由项 const s1Route = navState.routes.find(route => route.name === "S1"); if (s1Route) { const s1Index = navState.routes.indexOf(s1Route); // 重置栈,保留S0到S1的路由,移除后面的所有页面 this.props.navigation.reset({ index: s1Index, routes: navState.routes.slice(0, s1Index + 1) }); }
这个方法不管栈中间有多少页面,都能精准回到原来的S1实例,同时保证返回按钮正常回到S0。
为什么你之前的尝试无效?
popToTop():这个方法会直接回到栈的第一个页面(也就是S0),不是你要的S1,所以不符合需求。goBack("A"):goBack的参数是要返回的页面的上一个路由的key,不是路由名称,所以你传入"A"是无效的;如果要通过goBack实现,需要找到S1的下一个页面(也就是A1)的key,然后调用goBack(a1Route.key),但这样不如pop或reset直观。
内容的提问来源于stack exchange,提问作者Aung Myint Thein
相关产品推荐
相关产品推荐

