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

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

例如，我的hostsstack.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 和第四屏幕，而在初始屏幕中仍应可见firstScreen和thirdscreen。我应该怎么做到这一点？ I tried referencing https://reactnavigation.org/docs/hiding-tabbar-in-屏幕/实际上有效，但前提是我有一个嵌套堆栈，而不是我想要的三个。对于其他Stackoverflow问题也是如此，我找不到解决多个堆栈的解决方案。

我正在使用React Navigation 6。

任何帮助都非常感谢！

Answer 1

1. 在应用程序的顶层创建一个包含两个屏幕的堆栈：您的Tab Navigator和一个新的堆栈（即Notabbar或其他内容）。
2. 拿起所有想要将标签栏隐藏在您现在拥有的堆栈中的所有屏幕，然后将它们移入新的堆栈中。
3. 从标签堆栈内导航到这些屏幕。

下面的伪代码：

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

然后，当您在第一屏上时，请调用navigate（'notabbar'，{屏幕：second}），并且标签栏将被隐藏。