如何隐藏特定屏幕上的底部标签栏（react-navigation 3.x）

Question

I used the createBottomTabNavigator, but I can't hide the bottom app bar on a specific screen

const StackHome = createStackNavigator(
  {
    Home: Home,
    Autor: Autor,
    Publicacion: Publicacion,
    Comentarios: {
      screen: Comentarios,
      navigationOptions:{
        // this should do the work, but it doesn't
        tabBarVisible: false
      }
    }
  }
);

Answer 1

Finally I got a solution that works, the component would be like this

import { createStackNavigator } from "react-navigation";
import Home from "./Home";
import Autor from "./Profile";
import Publicacion from "./Publicacion";
import Comentarios from "./Comentarios";

const StackHome = createStackNavigator({
  Home: Home,
  Autor: Autor,
  Publicacion: Publicacion,
  Comentarios: Comentarios
});

// This does the trick
StackHome.navigationOptions = ({ navigation }) => {
  let tabBarVisible;
  if (navigation.state.routes.length > 1) {
    navigation.state.routes.map(route => {
      if (route.routeName === "Comentarios") {
        tabBarVisible = false;
      } else {
        tabBarVisible = true;
      }
    });
  }

  return {
    tabBarVisible
  };
};

export default StackHome;

Answer 2

Nope, it should not... you are hidint the tab bar ... in a stacknavigator... you can do something similar to this . but i don't know how you would hide it on one screen

const StackHome = createStackNavigator(
  {
    Home: Home,
    Autor: Autor,
    Publicacion: Publicacion,
    Comentarios: Comentarios
  }
);
StackHome navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;

  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }

  return {
    tabBarVisible,
  };
};

Answer 3

const routesWithNoTabNavigator = ['nameOfYourRoute', 'nameOfYourOtherRoute'];

<yourStackHere>.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  const currentRoute = 
        navigation.state.routes[navigation.state.routes.length -1].routeName;
  if(routesWithNoTabNavigator.includes(currentRoute)) {
      tabBarVisible = false;
  }

  return {
   tabBarVisible,
  };
};

Answer 4

if your screen is also nested stack navigation and the parent is a bottom navigation, there is a navigation prop on options function you can use. eg:

const BottomTab = createBottomTabNavigator();

const Home = () => (
  <BottomTab.Navigator
    initialRouteName="Explore"
    tabBarOptions={{
      activeTintColor: "#00B0F0",
    }}
  >
    <BottomTab.Screen
      name="Explore"
      component={Explore}
      options={({ navigation }) => {
        const { routes, index } = navigation.dangerouslyGetState();
        const { state: exploreState } = routes[index];
        let tabBarVisible = true;
        if (exploreState) {
          const { routes: exploreRoutes, index: exploreIndex } = exploreState;
          const exploreActiveRoute = exploreRoutes[exploreIndex];
          if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
        }
        return {
          tabBarVisible,
          title: "Explore",
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="search1" color={color} size={size} />
          ),
        };
      }}
    />

note that you will have to use if conditions there as props are not present when not activated, just simply do as my example. There is also a suggestion from the documentation: https://reactnavigation.org/docs/hiding-tabbar-in-screens/ personally i would do that if there's no option for tabBarVisible usage.

Answer 5

Do like this:

if(navigation.state.routes[navigation.state.index].routeName == "Comentarios"){
tabBarVisible = false;
}