抽屉

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

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

🌐 A navigation drawer is a common pattern in mobile apps, it allows users to swipe open a menu from a side of their screen to expose navigation options. This menu is also typically toggleable through a button in the app's header.

安装

🌐 Installation

要使用 drawer navigator，如果你还没有安装一些额外的依赖，你需要先安装它们。在 Android 和 iOS 上，drawer navigator 需要 react-native-reanimated 和 react-native-worklets 来驱动其动画。在网页上，这由 CSS 动画处理。

🌐 To use drawer navigator you'll need to install some additional dependencies if you do not have them already. On Android and iOS, the drawer navigator requires react-native-reanimated and react-native-worklets to drive its animations. On web, this is handled by CSS animations.

Terminal

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

要使用 drawer navigator，如果你还没有安装一些额外的依赖，你需要先安装它们。在 Android 和 iOS 上，drawer navigator 需要 react-native-reanimated 和 react-native-gesture-handler 来驱动其动画。在网页上，这由 CSS 动画处理。

🌐 To use drawer navigator you'll need to install some additional dependencies if you do not have them already. On Android and iOS, the drawer navigator requires react-native-reanimated and react-native-gesture-handler to drive its animations. On web, this is handled by CSS animations.

Terminal

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

用法

🌐 Usage

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

🌐 Now you can use the Drawer layout to create a drawer navigator.

app/_layout.tsx

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

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

要编辑抽屉式导航菜单标签、标题和屏幕选项，需要特定屏幕，如下所示：

🌐 To edit the drawer navigation menu labels, titles and screen options specific screens are required as follows:

app/_layout.tsx

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

export default function Layout() {
  return (
    <Drawer>
      <Drawer.Screen
        name="index" // This is the name of the page and must match the url from root
        options={{
          drawerLabel: 'Home',
          title: 'overview',
        }}
      />
      <Drawer.Screen
        name="user/[id]" // This is the name of the page and must match the url from root
        options={{
          drawerLabel: 'User',
          title: 'overview',
        }}
      />
    </Drawer>
  );
}