React Native如何实现Tab导航下全局可访问隐藏Stack页

把现有底部Tab导航嵌套在根Stack导航下，再将report页面注册为根Stack的同级屏幕，即可完全匹配需求：

• 该结构下report页面不会被Tab导航识别，自然不会展示在底部Tab栏
• 所有Tab下的任意子组件、弹窗都可以全局访问这个页面，不需要层层传递navigation属性
• 跳转返回时会自动回到触发跳转的原Tab页面，不会打乱现有Tab的状态留存

具体结构层级 #

从外到内的导航嵌套顺序为：

• 最外层保留原有NavigationContainer
• 嵌套根Stack导航（推荐用@react-navigation/native-stack），可全局设置screenOptions={{ headerShown: false }}隐藏Stack默认头部，避免和现有页面的头部冲突
• 根Stack的第一个屏幕放整套现有Tab导航，作为应用默认入口
• 根Stack下和Tab导航同级，注册report页面。如果需要report以弹窗样式弹出，直接给该页面加配置options={{ presentation: 'modal' }}即可

修改后的完整代码示例 #

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
// 导入业务页面组件
import Map from './pages/Map';
import User from './pages/User';
import Settings from './pages/Settings';
import Report from './pages/Report';

const TabNav = createBottomTabNavigator();
const RootStack = createNativeStackNavigator();

// 抽离原有底部Tab导航
const TabNavigator = () => {
  return (
    <TabNav.Navigator initialRouteName='home'>
      <TabNav.Screen 
        name='home' 
        component={Map} 
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="map-search-outline" color={color} size={30} style={style.iconStyle} />
          ),
          tabBarLabel: null
        }} 
      />
      <TabNav.Screen 
        name='user' 
        component={User} 
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="card-account-details-outline" color={color} size={30} style={style.iconStyle} />
          ),
          tabBarLabel: null
        }}
      />
      <TabNav.Screen 
        name='settings' 
        component={Settings} 
        options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="set-square" color={color} size={30} style={style.iconStyle} />
          ),
          tabBarLabel: null
        }}
      />
    </TabNav.Navigator>
  )
}

// 根导航入口
export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator screenOptions={{ headerShown: false }}>
        {/* Tab导航作为根Stack默认入口 */}
        <RootStack.Screen name='TabRoot' component={TabNavigator} />
        {/* 隐藏的report页面，与Tab同级，全局可访问 */}
        <RootStack.Screen 
          name='report' 
          component={Report}
          // 需要modal弹出样式可打开下方配置
          // options={{ presentation: 'modal' }}
        />
      </RootStack.Navigator>
    </NavigationContainer>
  )
}

跳转使用方式 #

在map、settings页面的任意子组件、modal弹窗中，直接调用导航方法即可跳转，不需要额外处理层级问题：

// 函数组件可直接用useNavigation钩子获取导航对象
import { useNavigation } from '@react-navigation/native';

const AnySubComponent = () => {
  const navigation = useNavigation();

  const handleJump = () => {
    // 支持正常传参
    navigation.navigate('report', { /* 自定义页面参数 */ })
  }

  return <Button onPress={handleJump} title="打开上报页面" />
}

不要把report页面注册到某一个Tab页的子Stack下，这种实现会导致其他Tab页面跳转report时出现导航状态异常，也无法做到真正的全局访问。

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