跨多个堆栈导航器隐藏多个屏幕中的底部选项卡

Question

AppNavigator 组件，基本上只是底部选项卡，指向多个嵌套的堆栈导航器。

AppNavigator.js:

const Tab = createMaterialBottomTabNavigator();
export const AppNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Search" component={SearchStack} />
      <Tab.Screen name="Host" component={HostStack} />
      <Tab.Screen name="More" component={MoreStack} />
    </Tab.Navigator>
  );
};

例如，这是我的 HostStack.js:

const Stack = createStackNavigator();

export const HostNavigator = ({ navigation }) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="First" component={FirstScreen} />
      <Stack.Screen name="Second" component={SecondScreen} />
    </Stack.Navigator>
  );
};

和MoreStack.js：

const Stack = createStackNavigator();

export const MoreStack = ({ navigation }) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Third" component={ThirdScreen} />
      <Stack.Screen name="Fourth" component={FourthScreen} />
    </Stack.Navigator>
  );
};

我想隐藏 SecondScreen 和 FourthScreen 中的底部标签导航，同时它在初始屏幕 FirstScreen 和 ThirdScreen 中应该仍然可见。我应该如何做到这一点？我尝试引用 https://reactnavigation.org/docs/hiding-tabbar-in-screens/ 并且它确实有效，但前提是我有一个嵌套堆栈，而不是我想要的三个。对于其他 Whosebug 问题也是如此，我一直没能找到包含多个堆栈的解决方案。

我正在使用 React Navigation 6。

非常感谢任何帮助！

Answer 1

在您的应用程序的顶层创建一个包含两个屏幕的堆栈：您的选项卡导航器和一个新堆栈（即 NoTabBar 或其他）。
将所有你想隐藏标签栏的屏幕从你现在所在的堆栈中取出，然后将它们移动到新堆栈中。
从选项卡堆栈中导航到这些屏幕。

伪代码如下：

// TabNavigator.jsx - for this you could just rename your AppNavigator to TabNavigator

// NoTabBarStack.jsx
const Stack = createStackNavigator();
export const NoTabBarStack = ({ navigation }) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Second" component={SecondScreen} />
      <Stack.Screen name="Fourth" component={FourthScreen} />
    </Stack.Navigator>
  );
};

// AppNavigator.jsx
const Stack = createStackNavigator();
export const AppNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Tabs" component={TabNavigator} />
      <Stack.Screen name="NoTabBar" component={NoTabBarStack} />
    </Stack.Navigator>
  );
};

然后，当您在 FirstScreen 上时，调用 navigate('NoTabBar', {screen: Second}) 标签栏将被隐藏。

跨多个堆栈导航器隐藏多个屏幕中的底部选项卡

Hiding bottom tabs in multiple screens across multiple stack navigators

react-native

react-navigation

react-navigation-v6