使用Expo Router实现首页抽屉导航+其他页面栈导航的问题

核心结构思路 #

用根栈导航作为全局容器，将抽屉导航作为栈的第一个「屏幕组」，动态路由和其他非抽屉页面直接放在根目录下，既保证全局返回按钮正常，又能让抽屉仅在首页组生效。

最终文件结构 #

app/
├── _layout.tsx       # 全局栈导航
├── index.tsx         # 重定向到首页抽屉
├── [postId].tsx      # 动态路由页面（外部链接访问）
├── settings.tsx      # 非抽屉、非动态路由页面
└── home/
    ├── _layout.tsx   # 首页抽屉导航
    ├── index.tsx     # 抽屉首页
    ├── profile.tsx   # 抽屉可访问页面
    └── favorites.tsx # 抽屉可访问页面

代码实现 #

1. 根栈布局 (app/_layout.tsx)

全局使用栈导航，隐藏抽屉所在组的头部（抽屉自身会提供头部），其他页面正常显示栈头部（带返回按钮）：

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      {/* 隐藏抽屉组的根头部，避免重复 */}
      <Stack.Screen name="home" options={{ headerShown: false }} />
      {/* 动态路由页面，自定义标题 */}
      <Stack.Screen name="[postId]" options={{ title: '文章详情' }} />
      {/* 普通页面，自定义标题 */}
      <Stack.Screen name="settings" options={{ title: '系统设置' }} />
    </Stack>
  );
}

2. 抽屉布局 (app/home/_layout.tsx)

仅在首页组启用抽屉导航，配置抽屉选项：

import { Drawer } from 'expo-router/drawer';
import { HeaderBackButton } from '@react-navigation/elements';
import { router } from 'expo-router';

export default function HomeLayout() {
  return (
    <Drawer>
      {/* 抽屉首页，作为抽屉默认打开的页面 */}
      <Drawer.Screen name="index" options={{ drawerLabel: '首页' }} />
      {/* 抽屉可访问页面，添加返回按钮回到首页 */}
      <Drawer.Screen
        name="profile"
        options={{
          drawerLabel: '我的资料',
          headerLeft: () => <HeaderBackButton onPress={() => router.push('/home')} />
        }}
      />
      <Drawer.Screen
        name="favorites"
        options={{
          drawerLabel: '我的收藏',
          headerLeft: () => <HeaderBackButton onPress={() => router.push('/home')} />
        }}
      />
    </Drawer>
  );
}

3. 首页 (app/home/index.tsx)

抽屉首页，可跳转至其他栈页面：

import { View, Text, Button, StyleSheet } from 'react-native';
import { router } from 'expo-router';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>首页（抽屉导航）</Text>
      <Button title="跳转到设置" onPress={() => router.push('/settings')} />
      <Button title="打开动态路由示例" onPress={() => router.push('/123')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 16 },
  title: { fontSize: 20, fontWeight: 'bold' }
});

4. 动态路由页面 (app/[postId].tsx)

支持外部链接直接访问，自动带返回按钮：

import { View, Text, StyleSheet } from 'react-native';
import { useLocalSearchParams } from 'expo-router';

export default function PostScreen() {
  const { postId } = useLocalSearchParams();
  return (
    <View style={styles.container}>
      <Text style={styles.title}>文章 ID：{postId}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 18 }
});

5. 根重定向 (app/index.tsx)

打开APP直接进入抽屉首页：

import { Redirect } from 'expo-router';

export default function RootIndex() {
  return <Redirect href="/home" />;
}

解决的问题点 #

• 首页抽屉正常工作：home 目录单独用抽屉布局，不影响其他页面。
• 跳转页面带返回按钮：所有非抽屉页面都在全局栈中，自动生成返回按钮回到首页。
• 抽屉页面的返回按钮：通过配置抽屉屏幕的 headerLeft，给非首页的抽屉页面添加返回按钮。
• 动态路由支持外部访问：动态路由页面放在根目录，Expo Router 直接解析外部链接，且进入后有返回按钮。

内容的提问来源于stack exchange，提问作者The-IT