Question

我使用了createBottomTabNavigator，但无法在特定屏幕上隐藏底部的应用栏

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

最后我得到了一个可行的解决方案，该组件就是这样

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

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 3

不，它不应该...您隐藏了标签栏...在堆栈导航器中...您可以执行类似于this的操作。但我不知道您如何将其隐藏在一个屏幕上

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 4

这样做：

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

Answer 5

如果您的屏幕也是嵌套堆栈导航，而父级是底部导航，则您可以使用选项功能上的导航道具。例如：

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

请注意，如果未激活时不存在作为道具的条件，则必须使用，仅以我的示例为例。文档中还有一个建议：https://reactnavigation.org/docs/hiding-tabbar-in-screens/我个人会这样做，如果没有tabBarVisible用法选项。

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

5 个答案: