问题描述
const PopStack = StackNavigator({
Pop1: { screen: Pop1Screen },
Pop2: { screen: Pop2Screen },
Pop3: { screen: Pop3Screen }
}, {
mode: "modal"
});
const TabBarViewController = TabNavigator({
MainStack: { screen: MainStack },
AddStack: { screen: PopStack }
})
常见应用场景,登录注册 PopStack页面是pop出来的，Pop3Screen完成登录，需要返回到TabBarViewController时候，
解决思路1
首先从TabBarViewController栈在进入PopStack栈的第一个Pop1Screen时候记录下route 的key 然后使用goback(key)返回到TabBarViewController栈 ,事实上经测试，没有任何反应
goback(key)
解决思路2
reset(navigation, routeName) {
const resetAction = NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName })]
});
navigation.dispatch(resetAction);
};
this.reset(this.props.navigation, 'TabBarViewController');
首先清空掉所有的路由，但是只能回到 PopStack栈的顶层，当尝试回到TabBarViewController栈即会出现
There is no route defined for key xxx. Must be one of: 'AAA','BBB','CCC' 即xxx不在PopStack栈中
github上解决方法：
import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
export default function DismissableStackNavigator(routes, options) {
const StackNav = StackNavigator(routes, options);
return class DismissableStackNav extends Component {
static router = StackNav.router;
render() {
const { state, goBack } = this.props.navigation;
const props = {
...this.props.screenProps,
dismiss: () => goBack(state.key),
};
return (
<StackNav
screenProps={props}
navigation={this.props.navigation}
/>
);
}
}
};
然后修改PopStack栈
const PopStack = DismissableStackNavigator({
Pop1: { screen: Pop1Screen },
Pop2: { screen: Pop2Screen },
Pop3: { screen: Pop3Screen }
}, {
mode: "modal"
});
在需要TabBarViewController栈的时候调用
this.props.screenProps.dismiss()
经调试，发现dismiss: () => goBack(state.key),中的key为PopStack 的key 为AddStack 的key，故而可以通过goBack(state.key)返回到TabBarViewController栈，但为何可以记录到AddStack的key
但恕我愚钝，不了解其中原理，还望看到文章的大神指导。
