Expo-Router底部标签栏嵌套栈屏幕无法以模态样式呈现问题求助

尝试使用新版Expo Router实现复杂嵌套导航，希望底部标签栏中的create屏幕以模态样式呈现，但目前它仅作为普通栈屏幕显示，未达到预期效果。

项目布局 #

app/
  _layout.tsx
  index.tsx
  (main)/
    _layout.tsx
    (tabs)/
      _layout.tsx
      home/
      create/
      profile/
      search/
      notifications/

相关代码 #

(main)/(tabs)/_layout.tsx #

import {Tabs} from "expo-router/tabs";
export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen name='home'/>
      <Tabs.Screen name='search'/>
      <Tabs.Screen name='create'/> // 期望以模态展示
      <Tabs.Screen name='notifications'/>
      <Tabs.Screen name='profile'/>
    </Tabs>
  )
}

(main)/(tabs)/create/_layout.tsx #

import {Stack} from "expo-router/stack";
export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{presentation: "modal"}}/>
    </Stack>
  )
}

用户疑问：是不是需要将create页面设置为带有modal类型presentation的栈才能使其以模态屏幕渲染？

核心问题在于：标签栏的子页面默认隶属于标签栏的栈层级，直接在子路由的栈中设置presentation: "modal"无法突破这个层级，所以模态效果不生效。正确实现方式如下：

1. 调整路由结构
   将create从(tabs)目录移出，放到(main)目录下，让它成为与标签栏同级的独立路由，布局修改后如下：

app/
  _layout.tsx
  index.tsx
  (main)/
    _layout.tsx
    (tabs)/
      _layout.tsx
      home/
      profile/
      search/
      notifications/
    create/

2. 配置(main)/_layout.tsx
   将标签栏和create都作为栈的子屏幕，给create设置模态展示属性：

import { Stack } from "expo-router/stack";

export default function MainLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="create" options={{ presentation: "modal" }} />
    </Stack>
  );
}

3. 修改标签栏的跳转逻辑
   在标签栏中保留create入口，但自定义点击事件跳转到独立的模态路由：

import { Tabs } from "expo-router/tabs";
import { useRouter } from "expo-router";
import { TouchableOpacity } from "react-native";

export default function TabsLayout() {
  const router = useRouter();
  return (
    <Tabs>
      <Tabs.Screen name='home'/>
      <Tabs.Screen name='search'/>
      <Tabs.Screen 
        name='create' 
        options={{
          tabBarButton: (props) => (
            <TouchableOpacity {...props} onPress={() => router.push('/(main)/create')} />
          )
        }}
      />
      <Tabs.Screen name='notifications'/>
      <Tabs.Screen name='profile'/>
    </Tabs>
  )
}

完成上述修改后，点击标签栏的create按钮，页面就会以模态形式弹出。

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