抽屉

编辑页面

了解如何在 Expo Router 中使用抽屉布局。

导航抽屉是移动应用中的一种常见模式，它允许用户从屏幕一侧滑出菜单，以显示导航选项。这个菜单通常也可以通过应用程序标题栏中的按钮进行切换。

安装

要使用抽屉导航器，如果你还没有安装某些额外依赖，则需要先安装它们。在 Android 和 iOS 上，抽屉导航器需要 react-native-reanimated 和 react-native-worklets 来驱动其动画。在 web 上，这由 CSS 动画来处理。

Terminal

- npx expo install @react-navigation/drawer react-native-reanimated react-native-worklets

要使用抽屉导航器，如果你还没有安装某些额外依赖，则需要先安装它们。在 Android 和 iOS 上，抽屉导航器需要 react-native-reanimated 和 react-native-gesture-handler 来驱动其动画。在 web 上，这由 CSS 动画来处理。

Terminal

- npx expo install @react-navigation/drawer react-native-reanimated react-native-gesture-handler

用法

现在你可以使用 Drawer 布局来创建一个抽屉导航器。

src/app/_layout.tsx

import { Drawer } from 'expo-router/drawer';

export default function Layout() {
  return <Drawer />;
}

要编辑抽屉导航菜单的标签、标题和屏幕选项，需要为特定屏幕按如下方式进行设置：

src/app/_layout.tsx

import { Drawer } from 'expo-router/drawer';

export default function Layout() {
  return (
    <Drawer>
      <Drawer.Screen
        name="index" // 这是页面的名称，必须与根路径中的 url 匹配
        options={{
          drawerLabel: 'Home',
          title: 'overview',
        }}
      />
      <Drawer.Screen
        name="user/[id]" // 这是页面的名称，必须与根路径中的 url 匹配
        options={{
          drawerLabel: 'User',
          title: 'overview',
        }}
      />
    </Drawer>
  );
}