在特定屏幕中隐藏标签栏

有时我们可能希望在嵌套在标签导航器中的堆栈导航器的特定屏幕中隐藏标签栏。假设我们有 5 个屏幕：Home、Feed、Notifications、Profile 和 Settings，并且您的导航结构如下所示

静态

const HomeStack = createNativeStackNavigator({
  screens: {
    Home: Home,
    Profile: Profile,
    Settings: Settings,
  },
});

const MyTabs = createBottomTabNavigator({
  screens: {
    Home: HomeStack,
    Feed: Feed,
    Notifications: Notifications,
  },
});

const Navigation = createStaticNavigation(MyTabs);

export default function App() {
  return <Navigation />;
}

动态

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="Feed" component={Feed} />
        <Tab.Screen name="Notifications" component={Notifications} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

使用此结构，当我们导航到 Profile 或 Settings 屏幕时，标签栏仍然会在这些屏幕上保持可见。

但是，如果我们只想在 Home、Feed 和 Notifications 屏幕上显示标签栏，而不在 Profile 和 Settings 屏幕上显示标签栏，则需要更改导航结构。实现此目的的最简单方法是将标签导航器嵌套在堆栈的第一个屏幕内，而不是将堆栈嵌套在标签导航器内

静态

const HomeTabs = createBottomTabNavigator({
  screens: {
    Home: Home,
    Feed: EmptyScreen,
    Notifications: EmptyScreen,
  },
});

const RootStack = createNativeStackNavigator({
  screens: {
    Home: HomeTabs,
    Profile: EmptyScreen,
    Settings: EmptyScreen,
  },
});

在 Snack 上尝试

动态

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={EmptyScreen} />
      <Tab.Screen name="Notifications" component={EmptyScreen} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Profile" component={EmptyScreen} />
        <Stack.Screen name="Settings" component={EmptyScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在 Snack 上尝试

在重新组织导航结构后，现在如果我们导航到 Profile 或 Settings 屏幕，标签栏将不再在屏幕上可见。