这是我的项目文件层次结构
RootTabNavigator
| AuthStackNavigator // I want to go back to this navigator
| AuthoScreen
| Welcome Screen
| MainTabNavigator // I want to reset MainTabNavigator
| FeedStacknavigator
| Screen A
| OtherStackNavigatorOne
| Screen E
| OtherStackNavigatorTwo
| Screen D
| MenuStackNavigator
| Menuo <-I'm here and want to reset to 'MainTabNavigator'
and go BACK to 'AuthScreen'
| Screen B
| Screen C
问题
用户位于 MenuStackNavigator 和 MainTabNavigator 下的 Menuo 屏幕上。
如果用户没有 token (当用户注销时),用户将返回到身份验证屏幕。
但同时我想重置MainTabNavigator。您可以卸载、执行 NavigationActions.init() 或任何您可以执行的操作。我更喜欢 NavigationActions.init()
我只想将 MainTabNavigator 设置为第一次。
代码
如果没有 token ,我将返回到身份验证屏幕(这正在工作)
This code if the part of Menuo Screen
componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {
const backAction = NavigationActions.back({
key: null
})
nextProps.navigation.dispatch(backAction);
...
(问题)我们如何重置 MainTabNavigator 包括子 StackNavigator?
MainTabNavigator.js
export default TabNavigator(
{
Feed: {
screen: FeedStacknavigator,
},
OtherOne: {
screen: OtherStackNavigatorOne,
}
...
}, {
navigationOptions: ({navigation}) => ){
header: null,
tabBarIcon: ({focused}) => ...
...
}
可能的解决方案
我也许可以将 MainTabNavigator 从函数更改为类,并在那里重置 TabNavigator。 (我不知道)。
这一次,我需要一个具体的工作示例。我一直在阅读文档并应用于我的应用程序,但我无法解决这个问题。
如果有任何不清楚的地方,请告诉我。
更新
const RootTabNavigator = TabNavigator ({
Auth: {
screen: AuthStackNavigator,
},
Welcome: {
screen: WelcomeScreen,
},
Main: {
screen: MainTabNavigator,
},
}, {
navigationOptions: () => ({
...
}
);
export default class RootNavigator extends React.Component {
componentDidMount() {
this._notificationSubscription = this._registerForPushNotifications();
}
最佳答案
这在大多数情况下应该有效:
componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {
let action = NavigationActions.reset({
index: 0,
key: null,
actions: [
NavigationActions.navigate({routeName: 'Auth'})
]
});
nextProps.navigation.dispatch(action);
}
...
}
或者尝试通过自定义操作增强您的导航器:
const changeAppNavigator = Navigator => {
const router = Navigator.router;
const defaultGetStateForAction = router.getStateForAction;
router.getStateForAction = (action, state) => {
if (state && action.type === "RESET_TO_AUTH") {
let payLoad = {
index: 0,
key: null,
actions: [NavigationActions.navigate({routeName: "AuthStackNavigator"})]
};
return defaultGetStateForAction(NavigationActions.reset(payLoad), state);
// or this might work for you, not sure:
// return defaultGetStateForAction(NavigationActions.init(), state)
}
return defaultGetStateForAction(action, state);
};
return Navigator;
};
const screens = { ... }
RootTabNavigator = changeAppNavigator(TabNavigator(screens, {
initialRouteName: ...,
...
}));
然后在您的菜单屏幕
中执行以下操作:
componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {
nextProps.navigation.dispatch({type: "RESET_TO_AUTH"});
...
关于reactjs - 用户注销(从其他屏幕)时如何重置 TabNavigator,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47930049/