React Native Navigation全局展示头部顶栏及底部标签栏问题咨询

你当前的问题核心是顶部标签导航仅嵌套在第一个底部标签的页面内，所以切换其他底部标签时顶部标签会消失，同时最外层栈导航没有配置闪屏路由导致无法实现启动页需求，调整方案如下：

调整后全局导航层级 #

RootStackNavigator（最外层，处理闪屏+全局头部logo）
  ├─ Screen：SplashScreen（闪屏页，隐藏所有导航栏）
  └─ Screen：MainPage（主应用页，保留头部logo配置）
      └─ BottomTabNavigator（全局底部标签栏，常驻显示）
          ├─ Screen：T页面（内部嵌套TopTabNavigator）
          ├─ Screen：B1页面（内部嵌套相同配置的TopTabNavigator）
          └─ Screen：B2页面（内部嵌套相同配置的TopTabNavigator）

如果需要顶部标签选中状态全局同步（切换底部标签不改变顶部标签选中项），可额外通过React Context/Redux存储顶部标签当前选中值，同步所有底部标签页内的TopTabNavigator状态即可。

修改后代码实现 #

1. App.js 代码 #

import { useEffect } from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const StackNav = createNativeStackNavigator();
const TopNav = createMaterialTopTabNavigator();
const BottomNav = createMaterialBottomTabNavigator();

// 新增闪屏页组件，无任何导航关联
const SplashScreen = ({navigation}) => {
  // 示例：2秒后跳转到主应用页，可替换为你自己的初始化逻辑
  useEffect(() => {
    const timer = setTimeout(() => {
      navigation.replace('Home');
    }, 2000);
    return () => clearTimeout(timer);
  }, [navigation]);

  return <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
    {/* 此处替换为你的闪屏页设计内容 */}
    <Text>欢迎使用应用</Text>
  </View>
}

// 抽离公共顶部标签导航组件，所有底部标签页复用保证顶部标签常驻
const CommonTopTab = () => {
  return (
    <TopNav.Navigator>
      <TopNav.Screen name="About" component={AboutScreen}  />
      <TopNav.Screen name="Find Us" component={FindUsScreen} />
      <TopNav.Screen name="Contact" component={ContactScreen}  />
      <TopNav.Screen name="Events" component={EventsScreen}  />      
    </TopNav.Navigator>    
  );
}

function App(){
  return (
    <NavigationContainer>
      <StackNav.Navigator initialRouteName="Splash">
        {/* 闪屏页配置，隐藏所有头部导航 */}
        <StackNav.Screen 
          name="Splash" 
          component={SplashScreen} 
          options={{headerShown: false}}
        />
        {/* 主应用页，保留全局头部logo配置 */}
        <StackNav.Screen 
          name="Home" 
          component={BottomTabScreen} 
          options={{ 
            headerTitle: props => <LogoTitle {...props} />, 
            headerBlurEffect: 'dark' 
          }} 
        />                
      </StackNav.Navigator>    
    </NavigationContainer>
  );
}

2. BottomTabScreen 代码 #

const BottomTabScreen = () =>{
  return (
    <BottomNav.Navigator>
      {/* 所有底部标签页都复用公共顶部标签组件，保证顶部标签全局常驻 */}
      <BottomNav.Screen name="T" component={CommonTopTab}  />
      <BottomNav.Screen name="B1" component={CommonTopTab}  />
      <BottomNav.Screen name="B2" component={CommonTopTab} />     
    </BottomNav.Navigator>
  );
}

额外说明 #

如果B1、B2页面不需要跟随顶部标签切换内容，只需要固定显示自身内容同时保留顶部标签栏，可单独给B1、B2编写对应的顶部标签导航组件，或者在CommonTopTab中通过useRoute()获取当前底部标签名称，做逻辑判断渲染不同的顶部标签项和内容即可。

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