在 TabNavigator 中阻止/禁用选项卡 - 反应导航

2024-03-23

我有一个 TabNavigator,如图所示。标题图片 https://i.stack.imgur.com/M9Zfr.png

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

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

Now 我想阻止/禁用“第二个”和“第三个”选项卡。它应该是可见的,但人们不应该能够导航到它们。

我尝试阻止这些选项卡,如图所示here https://reactnavigation.org/docs/routers/#Blocking-Navigation-Actions但我想我错过了一些东西。我的尝试:

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 示例略有不同。以下应该有效:

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

EDIT: 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. react native router disable tab

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 TabNavigator 中阻止/禁用选项卡 - 反应导航 的相关文章

随机推荐