Expo 路由器抽屉：显示标题时导航不起作用

Question

我正在使用 expo-router 开发一个 Expo 项目并实现一个用于导航的抽屉。当我在 screenOptions 中设置 headerShown: true 时，会出现此问题。当抽屉打开时，点击项目不会导航到相应的屏幕。

这是我的代码的相关部分：

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.设置 headerShown: false 可以解决问题，但我需要标题可见。 2.检查问题是否在没有自定义样式或配置的情况下发生 - 它仍然存在。

Answer 1

问题这样解决：

抽屉类型更改为“后退”，

ToggleDrawer 无法访问。通过将抽屉类型设置为“后”，抽屉成为同一交互层的一部分，允许toggleDrawer无缝工作，滑动和前抽屉类型导致了这个问题。