首页指南参考教程

抽屉

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

要使用抽屉导航器，你需要安装一些额外的依赖。

¥To use drawer navigator you'll need to install some extra dependencies.

安装

¥Installation

Terminal

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

SDK 50 及以上版本无需额外配置。当你安装库时，重新启动 Babel 插件会自动在 babel-preset-expo 中配置。

¥No additional configuration is required for SDK 50 and above. Reanimated Babel plugin is automatically configured in babel-preset-expo when you install the library.

更新你的 babel.config.js 以包含 Reanimated babel 插件：

¥Update your babel.config.js to include the Reanimated babel plugin:

babel.config.js

module.exports = {
  presets: [
      %%placeholder-start%%... %%placeholder-end%%
    ],
    plugins: [
      %%placeholder-start%%... %%placeholder-end%%
      'react-native-reanimated/plugin',
    ],
};

添加 Babel 插件后，重新启动开发服务器并使用以下命令清除打包器缓存：

¥After you add the Babel plugin, restart your development server and clear the bundler cache using the command:

Terminal

- npx expo start --clear

如果你加载其他 Babel 插件，Reanimated 插件必须是插件数组中的最后一项。

¥If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array.

用法

¥Usage

现在你可以使用 Drawer 布局来创建抽屉式导航器。你需要将 <Drawer /> 封装在 <GestureHandlerRootView> 中才能启用手势。你的组件树中只需要一个 <GestureHandlerRootView>。任何嵌套路由都不需要单独封装。

¥Now you can use the Drawer layout to create a drawer navigator. You'll need to wrap the <Drawer /> in a <GestureHandlerRootView> to enable gestures. You only need one <GestureHandlerRootView> in your component tree. Any nested routes are not required to be wrapped individually.

app/_layout.tsx

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Drawer } from 'expo-router/drawer';

export default function Layout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer />
    </GestureHandlerRootView>
  );
}

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

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

app/_layout.tsx

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { Drawer } from 'expo-router/drawer';

export default function Layout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <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>
    </GestureHandlerRootView>
  );
}

注意：在网络上使用 react-native-gesture-handler 时要小心。它可以显着增加 JavaScript 包的大小。了解有关使用特定于平台的模块的更多信息。

¥Note: Be careful when using react-native-gesture-handler on the web. It can increase the JavaScript bundle size significantly. Learn more about using platform-specific modules.

现在你可以使用 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>
  );
}