在TabNavigator中阻止/禁用选项卡 - react-navigation

Question

我有一个TabNavigator,如图所示. 标题图片

我正在使用TabNavigator创建这些选项卡,如下所示.

const Tab_Navigator = TabNavigator({
    First:{
        screen: First,
    },
    Second:{
        screen: Second,
    },
    Third:{
        screen: Third,
    },

现在我想阻止/禁用"第二"和"第三"选项卡.它应该是可见的,但是人们不应该导航到它们.

我尝试阻止这些显示,如我所示,但我想我错过了一些东西.我的尝试:

Tab_Navigator.router.getStateForAction = (action, state) => {
if( action.type === NavigationActions.navigate({ routeName: "Second"}) ||
    action.type === NavigationActions.navigate({ routeName: "Third"}))
{
    return null;
}

return Byte.router.getStateForAction(action, state);

};

Answer 1

在这种情况下,action.type ="Navigation/NAVIGATE"和action.routeName是选项卡的名称.它与ReactNavigation Routers示例略有不同.以下应该有效:

const defaultGetStateForAction = Tab_Navigator.router.getStateForAction;

Tab_Navigator.router.getStateForAction = (action, state) => {
  if ((action.type === NavigationActions.NAVIGATE) &&
     (action.routeName === "Second" || action.routeName === "Third") {
    return null;
  }

  return defaultGetStateForAction(action, state);
};

编辑:这是一个Chrome调试器的图像,它停在一个非常相似的代码段中的断点处(选项卡名称不同),但它显示了传递给此函数的"action"对象的值.

Answer 2

对于Version 5.x+ 有一种新方法可以做到这一点。

<Tabs.Screen
  name="Chat"
  component={Chat}
  listeners={{
    tabPress: e => {
      // Prevent default action
      e.preventDefault();
    },
  }}
/>

这是文档的参考链接：https ://reactnavigation.org/docs/navigation-events/