The AppNavigator component, which is basically just bottom tabs, points to multiple nested stack navigators.

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

Here is, for example, my 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>
  );
};

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

I want to hide bottom tabs navigation in SecondScreen and FourthScreen, while it should still be visible in initial screens FirstScreen and ThirdScreen. How should I accomplish this? I tried referencing https://reactnavigation.org/docs/hiding-tabbar-in-screens/ and it actually works, but only if I have one nested stack, not three as I would want to. Same for other stackoverflow questions, I haven't been able to find a solution which incoporates multiple stacks.

I am using React Navigation 6.

Any help is really appreciated!

CodePudding user response：

1. Create a stack at the top level of your app that contains two screens: your tab navigator, and a new stack (i.e. NoTabBar or something).
2. Take all the screens you want to hide the tab bar on out of the stacks you have them in now, and move them into that new stack.
3. Navigate to those screens from inside your tab stacks.

Pseudocode below:

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

Then, when you're on FirstScreen, call navigate('NoTabBar', {screen: Second}) and the tab bar will be hidden.