抽屉

了解如何在 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

在 SDK 56 及更高版本中，抽屉导航器打包在 expo-router 中，并在底层使用 react-native-drawer-layout。

🌐 In SDK 56 and later, the drawer navigator is bundled in expo-router and uses react-native-drawer-layout under the hood.

在 Android 和 iOS 上，抽屉需要 react-native-reanimated 和 react-native-worklets 来驱动其动画。在网页上，动画由 CSS 处理。

🌐 On Android and iOS, the drawer requires react-native-reanimated and react-native-worklets to drive its animations. On web, animation is handled by CSS.

要使用抽屉导航器，如果你还没有这些依赖，请安装它们：

🌐 To use the drawer navigator, install these dependencies if you do not have them already:

Terminal

- npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler

要使用 drawer navigator，如果你还没有这些依赖，请安装它们：

🌐 To use drawer navigator, install these dependencies if you do not have them already:

Terminal

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

要使用 drawer navigator，如果你还没有这些依赖，请安装它们：

🌐 To use drawer navigator, install these dependencies if you do not have them already:

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.

src/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:

src/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>
  );
}