React Navigation嵌套导航如何控制底部Tab栏显隐

底部Tab栏仅在TabNavigator注册的子页面内展示是React Navigation的默认渲染规则，你当前的配置把Screen5放在了和Tab容器平级的根Stack下，跳转时会直接覆盖整个Tab容器，自然不会显示Tab栏。按以下步骤调整即可实现需求：

1. 重构导航层级 #

把需要保留Tab栏的Screen5移入Tab.Navigator的注册列表，根Stack仅保留Tab容器入口和需要隐藏Tab的Screen6：
修改Tab.js中的Tab导航配置：

const Tab = createBottomTabNavigator();

const Tabs = () => {
    return(
        <Tab.Navigator>
            <Tab.Screen name="Screen1" component={Screen1} />
            <Tab.Screen name="Screen2" component={Screen2} />
            <Tab.Screen name="Screen3" component={Screen3} />
            <Tab.Screen name="Screen4" component={Screen4} />
            {/* 新增Screen5到Tab注册列表，默认携带底部Tab */}
            <Tab.Screen 
                name="Screen5" 
                component={Screen5}
                options={{
                    // 如果不需要Screen5出现在底部Tab的可点击按钮中，加这行即可
                    tabBarButton: () => null
                }}
            />   
        </Tab.Navigator>
    );
}

修改根Stack.Navigator配置，移除重复注册的Screen1-Screen5，仅保留Tab入口和无Tab的Screen6：

<Stack.Navigator>
    <Stack.Group screenOptions={{ headerShown: false }}>
        {/* 所有带底部Tab的页面统一走这个入口渲染 */}
        <Stack.Screen name="RootTabs" component={Tabs}/>
        {/* 不需要Tab的页面放在Stack外层，跳转时自动覆盖Tab栏 */}
        <Stack.Screen name="Screen6" component={Screen6}/>
    </Stack.Group>
</Stack.Navigator>

2. 跳转逻辑适配 #

• 从Screen4跳转到Screen5：原有navigation.navigate('Screen5')逻辑无需修改，跳转后全程保留底部Tab栏
• 跳转到Screen6：直接调用navigation.navigate('Screen6')即可，页面会在Stack层级打开，自动隐藏底部Tab

注意事项 #

• 不推荐通过动态修改tabBarStyle: {display: 'none'}的方式控制Tab显隐，这种方案在页面切换时容易出现Tab栏闪烁、页面布局跳动的问题，通过导航层级区分Tab显隐是官方推荐的实现方式，稳定性更好
• 配置tabBarButton: () => null只会隐藏Tab栏上对应Screen5的入口按钮，不会影响Tab栏本身的展示，也不会影响页面跳转逻辑

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