TabNavigator中的“阻止/禁用"选项卡-反应导航 [英] Block/Disable tabs in TabNavigator - react-navigation

问题描述

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

I have a TabNavigator as shown in the picture. Header Image

我正在使用TabNavigator如下创建这些标签.

I am using TabNavigator for creating these tabs as below.

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

现在我要阻止/禁用第二"和第三"标签.它应该是可见的，但不能导航到它们.

我尝试屏蔽这些标签，如此处所示，但我想我是遗漏了什么.我的尝试:

I tried blocking these tabs as shown here but I guess I am missing something. My try:

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

};

推荐答案

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

In this case, the action.type = "Navigation/NAVIGATE" and action.routeName is the name of your tab. It is just a little different from the ReactNavigation Routers example. The following should work:

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调试器的图片，该图片在断点处以非常相似的代码停止(选项卡名称不同)，但是它显示了传递到此函数中的操作"对象的值.

Here is an image of the the Chrome Debugger stopped at a breakpoint in a very similar piece of code(tab names are different), but it shows the values of the "action" object being passed into this function.

这篇关于TabNavigator中的“阻止/禁用"选项卡-反应导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！