Expo Router抽屉导航：显示Header时页面无法跳转

问题描述 #

使用expo-router实现抽屉导航时，设置screenOptions={{ headerShown: true }}后，抽屉可正常打开，但点击抽屉内选项无法跳转至对应页面；将headerShown设为false则跳转恢复正常，但业务需求需要保留Header显示。

相关代码 #

import { Drawer } from 'expo-router/drawer';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { ThemeProvider, DarkTheme, DefaultTheme } from '@react-navigation/native';
import { useSelector } from 'react-redux';
import { useColorScheme } from 'react-native';

function AppContent() {
  let theme = useSelector((state) => state.theme.theme);
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={theme === 'dark' ? DarkTheme : DefaultTheme}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <Drawer
          defaultStatus="open"
          screenOptions={{
            headerShown: true,
            drawerActiveBackgroundColor: '#3498db',
            drawerActiveTintColor: '#ffffff',
            drawerInactiveTintColor: '#bdc3c7',
            drawerStyle: {
              backgroundColor: '#f4f4f4',
              width: 200,
            },
            drawerType: 'slide',
            swipeEnabled: true,
          }}
        >
          <Drawer.Screen name="index" options={{ title: 'Home' }} />
          <Drawer.Screen name="audits" options={{ title: 'Audits' }} />
          <Drawer.Screen name="support" options={{ title: 'Support' }} />
        </Drawer>
      </GestureHandlerRootView>
    </ThemeProvider>
  );
}

export default function RootLayout() {
  return <AppContent />;
}

解决方案 #

1. 确认路由文件存在 #

expo-router基于文件系统路由，每个Drawer.Screen的name必须对应app目录下的实际页面文件：

• name="index" 对应 app/index.tsx（或.jsx）
• name="audits" 对应 app/audits.tsx
• name="support" 对应 app/support.tsx

若文件不存在，即使隐藏Header也无法触发跳转，需确保每个路由对应的页面文件已创建并导出默认组件。

2. 升级依赖修复版本bug #

部分旧版本expo-router存在Drawer导航与默认Header共存时的跳转bug，升级至最新稳定版可解决：

npx expo install expo-router react-native-gesture-handler react-native-safe-area-context

3. 自定义Header替代默认配置 #

若上述方法无效，可关闭默认Header后自定义Header组件，避免冲突：

<Drawer
  defaultStatus="open"
  screenOptions={{
    headerShown: false, // 关闭默认Header
    drawerActiveBackgroundColor: '#3498db',
    // 其他抽屉配置...
    // 全局自定义Header
    header: ({ navigation, route }) => (
      <View style={{ 
        height: 60, 
        backgroundColor: '#fff', 
        paddingHorizontal: 16, 
        flexDirection: 'row', 
        alignItems: 'center' 
      }}>
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Text style={{ fontSize: 20 }}>☰</Text>
        </TouchableOpacity>
        <Text style={{ fontSize: 18, fontWeight: 'bold', marginLeft: 16 }}>
          {route.options.title}
        </Text>
      </View>
    )
  }}
>
  <Drawer.Screen name="index" options={{ title: 'Home' }} />
  <Drawer.Screen name="audits" options={{ title: 'Audits' }} />
  <Drawer.Screen name="support" options={{ title: 'Support' }} />
</Drawer>

4. 调整组件层级 #

尝试将ThemeProvider移至GestureHandlerRootView内部，确保手势处理优先级正确：

function AppContent() {
  let theme = useSelector((state) => state.theme.theme);
  const colorScheme = useColorScheme();

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeProvider value={theme === 'dark' ? DarkTheme : DefaultTheme}>
        <Drawer
          // 抽屉配置...
        >
          {/* 抽屉页面... */}
        </Drawer>
      </ThemeProvider>
    </GestureHandlerRootView>
  );
}

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