admin管理员组

文章数量:1355618

I am creating a React Native app using React Navigation version 5, and I have a bottom tab navigator with a stack navigator nested inside each screen of the tab navigator. I only want the bottom tab bar to show when on the first page of each stack navigator. Here is a snack that displays my app's basic navigation functionality: /@brforest/hide-tab-1. Per the bottom tab documentation, there is a tabBarVisible options attribute, but:

Hiding tab bar can cause glitches and jumpy behavior. We remend the tab navigator inside of a stack navigator instead.

The guide for nesting the tab navigator inside the stack navigator is here. I tried using this method, but I could only get it to work if I had only one stack navigator, but I need to have a stack navigator for each of the tab screens. Here is my (unsuccessful) attempt to use this method on the same app from the previous snack: /@brforest/hide-tab-2. In this, I nested multiple tab navigators within a single stack navigator in an attempt to extrapolate the method suggested in the documentation. As you can see in this snack, the navigation within the stack does not work anymore, but the tabs still work.

To me, it makes much more sense to nest the stack navigators in the tab navigator (like I have in the first snack) than to try to nest the same tab navigator in a large stack navigators. However, I want to follow the documentation and find a way that does not cause "glitchy and jumpy behavior." Any suggestions on how I should achieve my desired navigation functionality?

Thanks!

I am creating a React Native app using React Navigation version 5, and I have a bottom tab navigator with a stack navigator nested inside each screen of the tab navigator. I only want the bottom tab bar to show when on the first page of each stack navigator. Here is a snack that displays my app's basic navigation functionality: https://snack.expo.io/@brforest/hide-tab-1. Per the bottom tab documentation, there is a tabBarVisible options attribute, but:

Hiding tab bar can cause glitches and jumpy behavior. We remend the tab navigator inside of a stack navigator instead.

The guide for nesting the tab navigator inside the stack navigator is here. I tried using this method, but I could only get it to work if I had only one stack navigator, but I need to have a stack navigator for each of the tab screens. Here is my (unsuccessful) attempt to use this method on the same app from the previous snack: https://snack.expo.io/@brforest/hide-tab-2. In this, I nested multiple tab navigators within a single stack navigator in an attempt to extrapolate the method suggested in the documentation. As you can see in this snack, the navigation within the stack does not work anymore, but the tabs still work.

To me, it makes much more sense to nest the stack navigators in the tab navigator (like I have in the first snack) than to try to nest the same tab navigator in a large stack navigators. However, I want to follow the documentation and find a way that does not cause "glitchy and jumpy behavior." Any suggestions on how I should achieve my desired navigation functionality?

Thanks!

• javascript
• react-native
• react-navigation
• react-navigation-v5

Share Improve this question Follow asked May 16, 2020 at 4:18 Beau ForestBeau Forest 10933 silver badges88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

After going through the internet I found my own way to hide the bottom tab in a specific stack screen.

export default function SignStack({ navigation, route }) {

   useEffect(() => {
    if (route.state?.index) {
      navigation.setOptions({
        tabBarVisible: false,
      });
    } else {
      navigation.setOptions({
        tabBarVisible: true,
      });
    }
  }, [navigation, route.state?.index]);



return <Stack.Navigator> ... </Stack.Navigator>

}

This will show only the bottom tab on the first stack screen.

Update Nov 17 2020

Hiding the bottom tab using getFocusedRouteNameFromRoute, This example shows the bottom tab only on Auth and Settings screen.

  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Auth';

  useEffect(() => {
    navigation.setOptions({
      tabBarVisible: ['Auth', 'Settings'].includes(routeName),
    });
  }, [navigation, routeName]);

Why not first solution TLDR

Above solution hide bottom tab on the screen based on the render route.state.index If you have a parallel navigation route it's fine to use the above solution.

Let's assume you have two tab navigation User stack and Home stack and on the user stack you have two screen Profile and Settings and if you wanna hide the bottom bar on the Settings screen you will be using the above solution that works fine But when you navigate to User Settings screen straight from Home then Bottom tab bar shows on the Settings screen and hides on the Profile screen, This happens because route.state.index of the Settings screen is 0 and Profile screen is 1.

Like you mentioned if you only want the first screens in each stack to show the bottom tab bar then I suggest you use the second approach. Create a base stack navigator with the first screen being the tab navigator itself :

const TabScreens = ({navigation}) => { // Tab navigator with only the screens that require bottom tab bar
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: '#e91e63',
      }}>
      <Tab.Screen
        name="Home"
        ponent={Home}
        options={{
          tabBarLabel: 'Home',
        }}
      />
      <Tab.Screen
        name="Wele"
        ponent={Wele}
        options={{
          tabBarLabel: 'Wele',
        }}
      />
    </Tab.Navigator>
  );
};

After creating the tab navigator, in the main renderer use:

    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Stack"
          ponent={TabScreens}
        />
        <Stack.Screen             // Add any number of extra screens that do not require the bottom tab here
         name="Other screen 1"
         ponent={OtherScreen1} />
        <Stack.Screen             
         name="Other screen 2"
         ponent={OtherScreen2} />
      </Stack.Navigator>
    </NavigationContainer>

This way you don't have to fiddle with the bottom tab ponent. You can also navigate to and from any screens that part of the base stack navigator and those that are part of the Tab Navigator. The only caveat here is all the screens apart from the screens in the tab navigator will be mounted and unmounted each time you navigate there and back.

the simple way

  options={{
        tabBarVisible: false,
      }}

本文标签： javascriptReact Navigation V5 Hide Bottom Tab in Specific ScreensStack Overflow