跳到主要内容
版本: 7.x

React Native 抽屉布局

一个跨平台的 React Native 抽屉组件，在原生平台使用 react-native-gesture-handler 和 react-native-reanimated 实现，在 Web 平台使用 CSS 过渡实现。

此包不与 React Navigation 集成。 如果你想将抽屉布局与 React Navigation 的导航系统集成，例如，想要在抽屉中显示屏幕，并能够使用 navigation.navigate 等在它们之间导航，请使用 抽屉导航器 代替。

安装​

要使用此包，请在项目根目录中打开终端并运行

npm install react-native-drawer-layout

然后，你需要安装和配置抽屉所需的库

  1. 首先，安装 react-native-gesture-handler 和 react-native-reanimated (至少版本 2 或 3)。

    如果你有一个 Expo 管理的项目，请在你的项目目录中运行

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

    如果你有一个裸 React Native 项目，请在你的项目目录中运行

    npm install react-native-gesture-handler react-native-reanimated

  2. 按照 安装指南 在你的项目中配置 Reanimated Babel 插件。

  3. 为了完成 react-native-gesture-handler 的安装，我们需要有条件地导入它。 为此，创建 2 个文件

    gesture-handler.native.js
    // Only import react-native-gesture-handler on native platforms
    import 'react-native-gesture-handler';
    gesture-handler.js
    // Don't import react-native-gesture-handler on web

    现在，将以下代码添加到你的入口文件的顶部（确保它在顶部，并且前面没有任何其他内容），例如 index.js 或 App.js

    import './gesture-handler';

    由于抽屉布局在 Web 上不使用 react-native-gesture-handler，这避免了不必要地增加 bundle 大小。

    警告

    如果你正在为 Android 或 iOS 构建，请不要跳过此步骤，否则你的应用可能会在生产环境中崩溃，即使在开发环境中运行良好。 这不适用于其他平台。

  4. 如果你在 Mac 上为 iOS 开发，你还需要安装 pods（通过 Cocoapods）来完成链接。

    npx pod-install ios

我们完成了！ 现在你可以构建并在你的设备/模拟器上运行该应用了。

快速开始​

import * as React from 'react';
import { Text } from 'react-native';
import { Drawer } from 'react-native-drawer-layout';
import { Button } from '@react-navigation/elements';

export default function DrawerExample() {
  const [open, setOpen] = React.useState(false);

  return (
    <Drawer
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      renderDrawerContent={() => {
        return <Text>Drawer content</Text>;
      }}
    >
      <Button
        onPress={() => setOpen((prevOpen) => !prevOpen)}
        title={`${open ? 'Close' : 'Open'} drawer`}
      />
    </Drawer>
  );
}

API 参考​

该包导出一个 Drawer 组件，你可以使用它来渲染抽屉。

Drawer​

此组件负责渲染带有动画和手势的抽屉侧边栏。

Drawer Props​

open​

抽屉是否打开。

onOpen​

当抽屉打开时调用的回调函数。

onClose​

当抽屉关闭时调用的回调函数。

renderDrawerContent​

返回一个 react 元素以渲染为抽屉内容的回调函数。

layout​

包含容器布局的对象。 默认为应用程序窗口的尺寸。

drawerPosition​

抽屉在屏幕上的位置。 在 RTL 模式下默认为 right，否则为 left。

drawerType​

抽屉的类型。 它决定了抽屉的外观和动画效果。

  • front：传统抽屉，覆盖屏幕并在其后有一个叠加层。
  • back：抽屉在屏幕后方滑动时显示出来。
  • slide：屏幕和抽屉都在滑动时滑动以显示抽屉。
  • permanent：永久抽屉显示为侧边栏。

默认为 front。

drawerStyle​

抽屉的样式对象。 你可以为抽屉传递自定义背景颜色或自定义宽度。

overlayStyle​

叠加层的样式对象。

hideStatusBarOnOpen​

抽屉打开时是否隐藏状态栏。 默认为 false。

keyboardDismissMode​

抽屉打开时是否关闭键盘。 支持的值为

  • none：抽屉打开时键盘不会关闭。
  • on-drag：当通过滑动姿势打开抽屉时，键盘将关闭。

默认为 on-drag。

statusBarAnimation​

隐藏状态栏时使用的动画。 支持的值为

  • slide：状态栏将滑出视图。
  • fade：状态栏将淡出视图。
  • none：状态栏将不进行动画处理。

与 hideStatusBarOnOpen 结合使用。

swipeEnabled​

是否启用滑动姿势来打开抽屉。 默认为 true。

滑动姿势仅在 iOS 和 Android 上受支持。

swipeEdgeWidth​

滑动姿势应从屏幕边缘激活多远。 默认为 32。

这仅在 iOS 和 Android 上受支持。

swipeMinDistance​

应激活打开抽屉的最小滑动距离。 默认为 60。

这仅在 iOS 和 Android 上受支持。

swipeMinVelocity​

应激活打开抽屉的最小滑动速度。 默认为 500。

这仅在 iOS 和 Android 上受支持。

configureGestureHandler​

用于配置底层 来自 react-native-gesture-handler 的 gesture 的回调函数。 它接收 gesture 对象作为参数

configureGestureHandler={({ gesture }) => {
  return gesture.enableTrackpadTwoFingerGesture(false);
}}
children​

抽屉应包裹的内容。

useDrawerProgress​

useDrawerProgress hook 返回一个 Reanimated SharedValue，它表示抽屉的进度。 它可以用于动画化屏幕的内容。

现代实现的示例

import { Animated } from 'react-native-reanimated';
import { useDrawerProgress } from 'react-native-drawer-layout';

// ...

function MyComponent() {
  const progress = useDrawerProgress();

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: interpolate(progress, [0, 1], [-100, 0]),
        },
      ],
    };
  });

  return <Animated.View style={animatedStyle}>{/* ... */}</Animated.View>;
}

如果你正在使用类组件，你可以使用 DrawerProgressContext 来获取进度值。

import { DrawerProgressContext } from 'react-native-drawer-layout';

// ...

class MyComponent extends React.Component {
  static contextType = DrawerProgressContext;

  render() {
    const progress = this.context;

    // ...
  }
}
警告

useDrawerProgress hook (或 DrawerProgressContext) 将在 Web 上返回一个模拟值，因为 Reanimated 未在 Web 上使用。 模拟值只能表示抽屉的打开状态（关闭时为 0，打开时为 1），而不能表示抽屉的进度。