React Navigation：导航至独立StackNavigator时保持BottomTabNavigator常驻显示的实现方案问询

你的问题根源在于导航器的嵌套层级不对——当你把个人资料的StackNavigator和BottomTabNavigator设为同级导航时，跳转到Profile Stack会完全替换掉当前的BottomTabNavigator界面，自然底部标签栏就消失了。要让标签栏始终可见，得把Profile相关页面整合到BottomTabNavigator的子导航层级里，下面给你两种可行的方案：

方案一：将Profile页面加入每个Tab的Stack导航器 #

这种方式最直观，每个Tab对应的Stack里都包含Profile相关页面，跳转时是在当前Tab的导航栈内切换，底部标签栏会一直保留。

步骤1：创建带Profile的Tab Stack #

比如首页的Stack：

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import ProfileSettings from '../screens/ProfileSettings';

const Stack = createStackNavigator();

export function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen 
        name="Home" 
        component={HomeScreen} 
        options={({ navigation }) => ({
          headerRight: () => (
            // 头部的跳转按钮
            <Button 
              title="我的资料" 
              onPress={() => navigation.navigate('Profile')} 
            />
          )
        })}
      />
      {/* 加入Profile相关页面 */}
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="ProfileSettings" component={ProfileSettings} />
    </Stack.Navigator>
  );
}

同理给其他Tab（比如消息页）创建类似的Stack，把Profile页面加进去。

步骤2：构建BottomTabNavigator #

把每个带Profile的Stack作为Tab的组件：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { HomeStack } from './HomeStack';
import { MessagesStack } from './MessagesStack';

const Tab = createBottomTabNavigator();

export function BottomTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="HomeTab" 
        component={HomeStack} 
        options={{ headerShown: false }} // 隐藏Tab的默认头部，用Stack里的自定义头部
      />
      <Tab.Screen 
        name="MessagesTab" 
        component={MessagesStack} 
        options={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
}

之后在任何Tab的页面里，直接用navigation.navigate('Profile')就能跳转，底部标签栏不会消失。

方案二：给BottomTabNavigator加隐藏的Profile Tab #

如果你不想在每个Tab Stack里重复添加Profile页面，可以把Profile Stack作为BottomTab的一个隐藏标签，这样跳转时依然在BottomTab的层级内，标签栏保持可见。

步骤1：创建独立的Profile Stack #

import { createStackNavigator } from '@react-navigation/stack';
import ProfileScreen from '../screens/ProfileScreen';
import ProfileSettings from '../screens/ProfileSettings';

const Stack = createStackNavigator();

export function ProfileStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="ProfileSettings" component={ProfileSettings} />
    </Stack.Navigator>
  );
}

步骤2：在BottomTab里添加隐藏标签 #

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { HomeStack } from './HomeStack';
import { MessagesStack } from './MessagesStack';
import { ProfileStack } from './ProfileStack';

const Tab = createBottomTabNavigator();

export function BottomTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeTab" component={HomeStack} options={{ headerShown: false }} />
      <Tab.Screen name="MessagesTab" component={MessagesStack} options={{ headerShown: false }} />
      {/* 隐藏这个Tab的按钮和标签 */}
      <Tab.Screen 
        name="ProfileTab" 
        component={ProfileStack} 
        options={{
          tabBarButton: () => null, // 隐藏按钮
          tabBarVisible: false // 隐藏该Tab的标签，整体底部标签栏仍会显示
        }}
      />
    </Tab.Navigator>
  );
}

步骤3：跳转至隐藏的Profile Tab #

在任何页面的头部按钮里，用嵌套导航的方式跳转：

navigation.navigate('ProfileTab', { screen: 'Profile' });

两种方案都能实现你要的效果，方案一更适合Profile和当前Tab有业务关联的场景，方案二更适合Profile是全局独立页面的场景，你可以根据自己的需求选择~

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