React Navigation特定操作类型及自定义MyCompleteReset调用方法咨询

一、这类特定操作的称呼 #

你这里创建的MyCompleteReset属于自定义导航动作（Custom Navigation Action）。React Navigation默认提供了back、navigate、reset这类内置导航动作，而通过扩展导航器的router.getStateForAction方法，我们可以定义自己的动作类型，来实现默认动作覆盖不了的自定义导航逻辑（比如你这里全局重置Tab导航器状态的需求）。

二、调用自定义MyCompleteReset动作的方法 #

你只需要创建一个符合自定义类型的action对象，然后通过navigation.dispatch分发它即可，和你调用内置的NavigationActions.back逻辑类似，具体修改如下：

1. 直接在触发位置创建并分发动作

把你原来的componentWillReceiveProps里的代码替换成下面的内容：

componentWillReceiveProps(nextProps) { 
  // 简化判断，_.isNil已经包含了undefined的情况
  if (_.isNil(nextProps.token)) { 
    // 创建自定义的重置动作
    const completeResetAction = {
      type: 'MyCompleteReset'
    };
    nextProps.navigation.dispatch(completeResetAction);
  }
}

2. （可选）封装成更规范的动作生成函数

如果想让代码更易维护，可以像官方的NavigationActions一样，把自定义动作封装成函数：

// 可以单独放在一个导航工具文件里
const MyCustomNavigationActions = {
  completeReset: () => ({
    type: 'MyCompleteReset'
  })
};

然后在调用的时候就可以这样写：

componentWillReceiveProps(nextProps) { 
  if (_.isNil(nextProps.token)) { 
    nextProps.navigation.dispatch(MyCustomNavigationActions.completeReset());
  }
}

补充说明 #

你现有的导航器扩展代码是正确的：当检测到type为MyCompleteReset的动作时，调用defaultGetStateForAction(NavigationActions.init())会将导航状态重置为初始状态，也就是MainTabNavigator的默认路由页面。

内容的提问来源于stack exchange，提问作者merry-go-round