如何设置React-Native导航使BottomTab在所有页面显示

问题根源：你当前把Patient页面和BottomTabsNavigator放在了同一个Stack.Navigator下，属于平级页面。当从Home页面跳转到Patient时，实际上是切换到了Stack的另一个根页面，脱离了Tab导航的层级，所以底部标签栏会消失。

以下是两种可行的修改方案：

方案一：将Patient页面整合到底部Tab导航中 #

把Patient页面添加到BottomTabsNavigator里，这样它就属于Tab导航的一部分，跳转后底部栏会保留。如果不想让Patient在Tab栏显示入口，可以隐藏它的Tab按钮：

function BottomTabsNavigator(){
    return (
        <Tab.Navigator>
            <Tab.Screen 
                name="Home" 
                component={HomeScreen} 
            />
            {/* 添加Patient页面到Tab导航中 */}
            <Tab.Screen 
                name="Patient"
                component={Patient}
                options={{
                    // 隐藏Tab栏上的入口按钮
                    tabBarButton: () => null,
                    // 如果需要临时隐藏整个Tab栏（按需使用），可替换为下面的配置
                    // tabBarStyle: { display: 'none' }
                }}
            />
        </Tab.Navigator>
    );
}

// 同时修改AuthenticatedStack，移除原有的Patient页面
function AuthenticatedStack() {
    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: { backgroundColor: Colors.blueHeader },
                headerTintColor: Colors.orangeClear,
            }}
        >
            <Stack.Screen 
                name="BottomTabs"
                component={ BottomTabsNavigator }
                options={{
                    headerShown: false, 
                }}
            />
            {/* 删除这一行 <Stack.Screen name="Patient" ... /> */}
        </Stack.Navigator>
    );
}

修改后在HomeScreen里用navigation.navigate('Patient')跳转，底部标签栏会正常显示。

方案二：在HomeScreen内部嵌套Stack导航 #

如果Patient页面仅和Home页面关联，可以在HomeScreen里嵌套一个Stack Navigator，把Patient作为Home的子页面，这样跳转时不会离开Tab层级：

// 先定义Home的内部Stack
function HomeStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen 
                name="HomeMain" 
                component={HomeScreenContent} // 把原HomeScreen的内容抽成这个独立组件
                options={{ title: 'Home' }}
            />
            <Stack.Screen 
                name="Patient" 
                component={Patient}
                options={{ title: 'Patient' }}
            />
        </Stack.Navigator>
    );
}

// 修改BottomTabsNavigator，用HomeStack代替原HomeScreen
function BottomTabsNavigator(){
    return (
        <Tab.Navigator>
            <Tab.Screen 
                name="Home" 
                component={HomeStack} 
                options={{ headerShown: false }} // 让Tab的header替代内部Stack的header，按需调整
            />
        </Tab.Navigator>
    );
}

// AuthenticatedStack保持不变，移除原Patient页面
function AuthenticatedStack() {
    return (
        <Stack.Navigator
            screenOptions={{
                headerStyle: { backgroundColor: Colors.blueHeader },
                headerTintColor: Colors.orangeClear,
            }}
        >
            <Stack.Screen 
                name="BottomTabs"
                component={ BottomTabsNavigator }
                options={{
                    headerShown: false, 
                }}
            />
        </Stack.Navigator>
    );
}

之后在HomeScreenContent里用navigation.navigate('Patient')跳转，底部标签栏会持续显示。

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