How can I hide the bottom tab bar on a specific screen (react-navigation 3.x)

问题

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

回答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;

回答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,
  };
};

回答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,
  };
};

回答4:

Do like this:

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

来源：https://stackoverflow.com/questions/54638872/how-can-i-hide-the-bottom-tab-bar-on-a-specific-screen-react-navigation-3-x

标签

javascript

react-native

react-navigation