基于React Native与Expo Router实现Tab页弹出Modal

不需要新建额外的分组文件夹，直接在现有(tabs)目录下操作就能实现需求，具体步骤如下：

• 第一步：添加Modal页面文件
  直接在app/(tabs)目录下创建Modal.js，编写你的模态框内容即可，示例代码：

  import { View, Text, Button } from 'react-native';
  import { useRouter } from 'expo-router';
  
  export default function ModalScreen() {
    const router = useRouter();
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>这是全局可调用的模态框</Text>
        <Button title="关闭" onPress={() => router.back()} />
      </View>
    );
  }
  

• 第二步：配置Tab布局的模态路由
  修改app/(tabs)/_layout.js，将Modal路由配置为模态展示类型。如果你的(tabs)/_layout.js原本是Tabs组件包裹的结构，需要在外层嵌套Stack组件，把Tabs作为Stack的一个子页面，同时添加Modal的路由并设置presentation: 'modal'：

  import { Stack, Tabs } from 'expo-router';
  import { Ionicons } from '@expo/vector-icons';
  
  export default function TabLayout() {
    return (
      <Stack>
        <Stack.Screen
          name="index"
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Modal"
          options={{
            presentation: 'modal',
            headerShown: false, // 可根据需求设置是否显示头部
          }}
        />
        {/* 原有Tab页配置 */}
        <Tabs.Screen
          name="Home1"
          options={{
            tabBarIcon: ({ color }) => <Ionicons name="home" color={color} size={24} />,
          }}
        />
        {/* Home2、Home3、Home4的Tab配置同理 */}
      </Stack>
    );
  }
  

• 第三步：在任意Tab页调用Modal
  在Home1-Home4的任意页面中，通过useRouter触发模态框打开：

  import { Button } from 'react-native';
  import { useRouter } from 'expo-router';
  
  export default function Home1() {
    const router = useRouter();
    return (
      <Button title="打开模态框" onPress={() => router.push('/(tabs)/Modal')} />
    );
  }
  

为什么不需要新建分组？ #

(tabs)本身已经是一个路由分组，直接在其中添加Modal页面并通过Stack配置模态展示，就能让这个Modal在所有Tab页中都能调用，既简化了文件结构，又符合Expo Router的路由嵌套逻辑。新建额外分组只会增加路由层级复杂度，完全没必要。

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