React Navigation 6 如何实现从底部标签栏打开全屏模态页面

这个需求完全可以实现，推荐通过调整导航嵌套结构+拦截底部标签点击事件的方式完成，具体操作如下：

实现步骤 #

1. 重构导航层级结构 #

在最外层新增根Stack导航，把现有底部标签导航作为根Stack的默认入口页面，同时在根Stack中新增独立的Chat模态页面：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { View } from 'react-native';

const RootStack = createNativeStackNavigator();

export function RootNavigator() {
  return (
    <RootStack.Navigator>
      {/* 原有底部标签导航作为主入口 */}
      <RootStack.Screen 
        name="TabRoot" 
        component={TabNavigator} 
        options={{ headerShown: false }} 
      />
      {/* 新增全屏模态Chat页面 */}
      <RootStack.Screen 
        name="ChatModal" 
        component={ChatNavigator}
        options={{
          presentation: 'fullScreenModal', // 配置为全屏模态效果
          title: 'Check-in', // 顶部导航栏标题，自带返回按钮
        }}
      />
    </RootStack.Navigator>
  )
}

2. 修改底部标签点击逻辑 #

调整原有TabNavigator中最后一个bottomchat标签的配置，拦截默认点击事件，改为跳转到根Stack的模态页面：

// 其余Tab.Screen代码保持不变，仅修改最后一个标签配置
<Tab.Screen
  name="bottomchat"
  // 用空组件占位，实际不会渲染该页面
  component={() => <View />}
  options={{
    tabBarLabel: "Check-in",
    tabBarIcon: ({ size, ...rest }) => (
      <Ionicons name="chatbubble-ellipses-outline" color={getColor(rest)} size={size} />
    ),
  }}
  // 拦截标签点击事件
  listeners={({ navigation }) => ({
    tabPress: (e) => {
      // 阻止默认跳转到bottomchat占位页的行为
      e.preventDefault();
      // 跳转到根Stack的模态页面
      navigation.navigate('ChatModal');
    },
  })}
/>

3. 替换入口导航 #

把App入口处原本渲染TabNavigator的逻辑改为渲染RootNavigator即可生效。

该方案的优势是模态页面完全脱离底部标签导航层级，天然不会显示底部标签栏，同时自带原生模态弹出动画和系统返回按钮，符合常规交互逻辑。如果不需要全屏模态，只需把presentation的值改为modal即可使用普通卡片模态效果。

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