抽屉

编辑

学习如何在 Expo Router 中使用抽屉布局。

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

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

安装

Terminal

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

用法

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

app/_layout.tsx

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

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

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

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

安装

Terminal

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

用法

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

app/_layout.tsx

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

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

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

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