如何通过Expo-Router底部Tab栏将新页面推入路由栈

可以实现，核心思路是绕过Tab默认的页面切换逻辑，手动调用路由的push方法，同时将目标页面放在外层Stack栈中，而非Tab栈内。具体修改步骤如下：

1. 调整页面结构 #

将editor页面从(tabs)目录移出，放到app根目录下（即创建app/editor/index.tsx），让它属于外层Stack路由栈，而非Tab内部栈。

2. 修改Tab栏配置 #

更新app/(tabs)/_layout.tsx中的中间Tab项，替换默认的切换逻辑为手动push：

import { router } from 'expo-router';
// ... 其他导入

export default function Layout() {
    return (
        <Tabs>
            <Tabs.Screen ... />
            <Tabs.Screen ... />
            <Tabs.Screen
                name="add-placeholder" // 改为占位名称，无需对应实际页面
                options={{
                    title: "", // 隐藏Tab文字
                    tabBarIcon: ({focused}) => {
                        return (
                            <View style={{alignItems: 'center', justifyContent: 'center', top: 0}}>
                                <AddIcon width={20} height={20} fill={focused ? "#5843A9" : "#fff"}/>
                            </View>
                        );
                    },
                    tabBarButton: (props) => (
                        <CustomTabBarButton 
                            onPress={() => router.push('/editor')} // 替换为push逻辑
                            children={props.children}
                        />
                    ),
                }}
            />
            <Tabs.Screen ... />
            <Tabs.Screen ... />
        </Tabs>
    );
}

3. 配置外层Stack（可选） #

如果需要自定义editor页面的头部样式，可在app/_layout.tsx中显式配置：

export default function Layout() {
    return (
        <Stack>
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen 
                name="editor" 
                options={{ 
                    title: "新建内容",
                    headerBackVisible: true // 确保返回按钮显示
                }} 
            />
        </Stack>
    );
}

效果说明 #

• 点击中间的Add按钮时，会调用router.push('/editor')，将editor页面推入外层Stack路由栈，此时底部Tab栏会自动隐藏。
• editor页面顶部会显示返回按钮，点击可回到之前的Tab页面，符合路由栈的导航逻辑。

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