在 React Native Expo 抽屉布局中导航到嵌套屏幕时如何在标题中显示后退按钮？

Question

我正在努力弄清楚如何在使用 expo-router/drawer 导航到抽屉布局中的嵌套屏幕时自动在标题中显示后退按钮。我知道这适用于堆栈布局，但我不知道如何使用抽屉实现相同的行为。

文件夹结构：

 app/
 |-- (app)/
 |   |-- dashboard/
 |   |   |-- detail/
 |   |   |   `-- index.jsx
 |   |   `-- index.jsx
 |   |-- _layout.jsx
 |   `-- index.jsx
 |-- _layout.jsx
 `-- sign-in.jsx

代码：

根布局：

export default function App() {
  return <RootLayoutNav />;
}

function RootLayoutNav() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack>
        <Stack.Screen
          name="sign-in"
          options={{
            title: 'Sign In',
          }}
        />
        <Stack.Screen
          name="(app)"
          options={{
            headerShown: false,
          }}
        />
      </Stack>
    </GestureHandlerRootView>
  );
}

（应用程序）_layout.jsx：

function DrawerNavigator() {
  return (
    <Drawer
      drawerContent={props => <CustomDrawerContent drawerData={appDrawerNavData} {...props} />}
      backBehavior="history"
      screenOptions={{
        drawerStyle: {
          width: 342,
        },
      }}>
      <Drawer.Screen
        name="dashboard/index"
        options={{
          title: 'Dashboard',
        }}
      />
    </Drawer>
  );
}

export default function App() {
  const { session, isLoading } = useSession();
  if (isLoading) {
    return <Text>Loading...</Text>;
  }
  if (!session) {
    return <Redirect href="/sign-in" />;
  }

  return <DrawerNavigator />;
}

问题：

当我导航到仪表板/详细信息屏幕时，我仍然在标题中看到抽屉图标，而不是后退图标。

问题：

我在这里做错了什么？如何确保导航到抽屉布局中的嵌套屏幕时自动显示后退按钮？

预先感谢您的帮助！

我尝试过的：

我在我的 Expo React Native 应用程序中设置了一个抽屉布局，期望它在导航到嵌套屏幕时自动在标题中显示后退按钮，类似于它在堆栈布局中的工作方式。我的抽屉配置包括一个自定义抽屉内容组件，我将 backBehavior 设置为“历史记录”，希望这会触发后退按钮出现。

我的期望：

我预计，当从仪表板屏幕导航到详细信息屏幕时，标题会自动更新以显示后退按钮，从而允许用户导航回仪表板屏幕。

Answer 1

我设法解决了这个问题。 我最终所做的是在仪表板文件夹中添加堆栈布局。

文件夹结构

  app/
 |-- (app)/
 |   |-- dashboard/
 |   |   |-- detail/
 |   |   |   `-- index.jsx
 |   |   `-- index.jsx
 |   |   `-- _layout.jsx // Dashboard Stack Navigator
 |   |-- _layout.jsx // Drawer Navigator
 |   `-- index.jsx
 |-- _layout.jsx  // Root Stack Navigator
 `-- sign-in.jsx

仪表板_布局

import { Stack } from "expo-router";

export default function DashboardStack() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          title: 'Dashboard',
        }}
      />
      <Stack.Screen
        name="detail/index"
        options={{
          title: 'Detail',
          // The back button is automatically handled by Stack Navigator
        }}
      />
    </Stack>
  );