用户注销时如何重置 TabNavigator(从其他屏幕)

问题描述

这是我的项目文件层次结构

Here is my project file hierarchy

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 屏幕上.

Problem

The user is on Menuo Screen under MenuStackNavigator and MainTabNavigator.

如果用户没有令牌(当用户注销时)，用户将返回到身份验证屏幕.

If user doesn't have a token (when user logs out), user goes back to the Auth Screen.

但同时我想重置 MainTabNavigator.您可以卸载、执行 NavigationActions.init() 或任何您可以执行的操作.我更喜欢 NavigationActions.init()

But at the same time I want to RESET MainTabNavigator. You can unmount , perform NavigationActions.init() or whatever you can. I prefer NavigationActions.init()

我只想将 MainTabNavigator 设置为第一次.

I just want to set MainTabNavigator to its very first time.

如果没有令牌，我会回到验证屏幕(这是有效的)

if there is no token, I go back to Auth Screen (This is working)

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?

(Question) How can we reset MainTabNavigator including child StackNavigators?

MainTabNavigator.js

export default TabNavigator(
    {
        Feed: {
          screen: FeedStacknavigator,
        },
        OtherOne: {
          screen: OtherStackNavigatorOne,
        }
        ...
    }, {
        navigationOptions: ({navigation}) => ){
            header: null,
        tabBarIcon: ({focused}) => ...
        ...
    }

可能的解决方案

我也许可以将 MainTabNavigator 从函数更改为类，并在那里处理重置 TabNavigator.(我不确定).

Possible Solution

I can maybe change MainTabNavigator from function to class and deal with resetting TabNavigator there. (I'm not sure).

这一次，我需要一个具体的工作示例.我一直在阅读文档并申请到我的应用程序，但我无法解决这个问题.

This time, I need a concrete working example. I've been reading doc and applying to my app but I couldn't solve this.

如果有任何不清楚的地方，请告诉我.

Please let me know if anything is unclear.

更新

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();
  }

推荐答案

这应该适用于大多数情况:

This should work in most cases:

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);
    }
    ...
}

或者尝试通过自定义操作增强您的导航器:

Or try by enhancing your navigator with custom 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: ...,
  ...
}));

然后在您的 Menuo Screen 中执行:

Then in your Menuo Screen do:

componentWillReceiveProps(nextProps) {
    if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {

        nextProps.navigation.dispatch({type: "RESET_TO_AUTH"});
    ...

这篇关于用户注销时如何重置 TabNavigator(从其他屏幕)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！