React Native中如何让底部导航在指定非菜单屏幕显示？

方法一：将AnotherScreen嵌套在目标Tab的导航栈中 #

如果AnotherScreen仅从某个特定Tab（比如HomeTab）跳转进入，推荐这种方式。每个Tab对应一个独立的Stack导航器，从Tab内的屏幕跳转到新页面时，底部导航会持续显示。

修改步骤： #

1. 为目标Tab创建一个Stack导航器，包含原Tab页面和AnotherScreen
2. 将BottomNavigation中对应Tab的component替换为这个Stack导航器

修改后的代码示例：

首先创建Home的Stack导航器：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const HomeStack = () => {
  return (
    <Stack.Navigator>
      {/* 原HomeTab页面 */}
      <Stack.Screen 
        name="Home" 
        component={HomeTab} 
        options={{ headerShown: false }} 
      />
      {/* 添加AnotherScreen到这个栈中 */}
      <Stack.Screen 
        name="AnotherScreen" 
        component={AnotherScreen} 
        options={{ headerShown: true }} 
      />
    </Stack.Navigator>
  );
};

然后修改BottomNavigation中的Home Tab：

<Tab.Screen
  name="Home"
  component={HomeStack} // 替换为HomeStack
  options={{
    tabBarIcon: ({focused, color}) => (
        <TabBarIcon
            focused={focused}
            tintColor={color}
            name="home-outline"
        />
    ),
  }}
/>

之后从HomeTab内跳转时，直接使用：

navigation.navigate('AnotherScreen');

这样AnotherScreen会在Home的栈中打开，底部导航保持显示。

方法二：添加隐藏的Tab承载AnotherScreen #

如果AnotherScreen需要从多个不同Tab跳转进入，推荐这种方式。在Tab.Navigator中新增一个不显示底部按钮的Tab，专门用来承载AnotherScreen。

修改步骤： #

1. 在BottomNavigation的Tab.Navigator中添加一个新的Tab.Screen
2. 设置tabBarButton: () => null隐藏底部导航项
3. 将AnotherScreen设为该Tab的组件

修改后的BottomNavigation代码：

const BottomNavigation = () => {
  return (
    <Tab.Navigator 
      tabBar={props => <MenuTab  {...props} />}
      screenOptions={{
        animation: 'slide_from_right'
      }}
      initialRouteName="Home"
      tabBarOptions={{
        labelStyle: {fontSize: 12, marginTop: 5, fontWeight: 'bold'},
        activeTintColor: "#5575DF",
        inactiveTintColor: "#9e9e9e",
        activeBackgroundColor: "#e5cfff",
      }}
    >
      {/* 原有的四个Tab保持不变 */}
      <Tab.Screen
        name="Home"
        component={HomeTab}
        options={{
          tabBarIcon: ({focused, color}) => (
              <TabBarIcon
                  focused={focused}
                  tintColor={color}
                  name="home-outline"
              />
          ),
        }}
      />
      <Tab.Screen
        name="One"
        component={One}
        options={{
          tabBarIcon: ({focused, color}) => (
              <TabBarIcon
                  focused={focused}
                  tintColor={color}
                  name="calendar-outline"
              />
          ),
        }}
      />
      <Tab.Screen
        name="Two"
        component={Two}
        options={{
          tabBarIcon: ({focused, color}) => (
              <TabBarIcon
                  focused={focused}
                  tintColor={color}
                  name="wallet-outline"
              />
          ),
        }}
      />
      <Tab.Screen
        name="Three"
        component={Three}
        options={{
          tabBarIcon: ({ focused, color }) => (
            <TabBarIcon
              focused={focused}
              tintColor={color}
              name="menu-outline"
            />
          ),
        }}
      />
      {/* 添加隐藏的Tab承载AnotherScreen */}
      <Tab.Screen
        name="AnotherScreen"
        component={AnotherScreen}
        options={{
          tabBarButton: () => null, // 隐藏底部导航按钮
          headerShown: true,
        }}
      />
    </Tab.Navigator>
  );
};

同时，删除根Stack.Navigator中的AnotherScreen项（现在它属于BottomNavigation的一部分），修改后的根导航代码：

<NavigationContainer>
  <Stack.Navigator initialRouteName="Onboarding">
    <Stack.Screen
      name="Onboarding"
      component={SplashScreen}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name="Bottom"
      component={BottomNavigation}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name="Login"
      component={LoginScreen}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name="Signup"
      component={SignUpScreen}
      options={{
        headerShown: false,
      }}
    />
    <Stack.Screen
      name="Forgotpassword"
      component={ForgotPassword}
      options={{
        headerShown: false,
      }}
    />
  </Stack.Navigator>
</NavigationContainer>

之后从任意Tab页面跳转时，直接使用：

navigation.navigate('AnotherScreen');

这样AnotherScreen会在底部导航的上下文里打开，底部导航正常显示，且不会出现在底部菜单项中。

内容的提问来源于stack exchange，提问作者Kevin Otieno