问题描述
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
但恕我愚钝,不了解其中原理,还望看到文章的大神指导。
网友评论
const PopStack = DismissableStackNavigator({
Pop1: { screen: Pop1Screen },
Pop2: { screen: Pop2Screen },
Pop3: { screen: Pop3Screen }
}, {
mode: "modal"
});
这里面的Pop1、Pop2、Pop3是随便定义的吗
reset(navigation, routeName) { const resetAction = NavigationActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName })] }); navigation.dispatch(resetAction);key:null }; this.reset(this.props.navigation, 'TabBarViewController');
const resetAction = NavigationActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName })],
key:null
});
navigation.dispatch(resetAction); 还是报There is no route defined for key xxx