React Native 抽屜版面配置

一個使用 react-native-gesture-handler 和 react-native-reanimated 執行的 React Native 跨平台抽屜元件。

這個套件不整合 React 導覽。如果您想整合抽屜版面配置及 React 導覽的導覽系統 (例如，想要在抽屜中顯示畫面並能夠使用 navigation.navigate 等在它們之間導覽)，請改用 抽屜導覽。

安裝

要使用這個套件，在專案根目錄開啟終端機並執行

npm

npm install react-native-drawer-layout

Yarn

yarn add react-native-drawer-layout

pnpm

pnpm add react-native-drawer-layout

然後，您需要安裝並設定抽屜所需的程式庫

1. 首先，安裝 react-native-gesture-handler 和 react-native-reanimated。

   如果您有 Expo 管理專案，在您的專案目錄中執行

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

   如果您有純粹的 React Native 專案，在您的專案目錄中執行

   npm

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

   Yarn

   yarn add react-native-gesture-handler react-native-reanimated

   pnpm

   pnpm add react-native-gesture-handler react-native-reanimated

   抽屜支援 Reanimated 1 和最新版本的 Reanimated。如果您想使用 Reanimated 最新版本，請務必依照 安裝指南 進行設定。

2. 若要完成安裝 react-native-gesture-handler，請在您的進入檔 (例如 index.js 或 App.js) 最上面 (確保在最上面且前面沒有任何其他內容) 加入下列內容

   import 'react-native-gesture-handler';
   警告

   如果您要針對 Android 或 iOS 編寫程式，請不要略過此步驟，否則您的應用程式即使在開發環境中執行正常，在實際執行時仍可能發生故障。這不適用於其他平台。

3. 如果您使用 Mac 並針對 iOS 開發應用程式，您也需要安裝 Pods (透過 CocoaPods)，才能完成連結。

npx pod-install ios

完成了！現在您可以建立並在裝置/模擬器上執行應用程式。

快速入門

import * as React from 'react';
import { Button, Text } from 'react-native';
import { Drawer } from 'react-native-drawer-layout';

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

負責使用動畫和手勢呈現抽屜的元件。

抽屜屬性

open

表示抽屜是否開啟。

onOpen

抽屜開啟時呼叫的回呼函式。

onClose

抽屜關閉時呼叫的回呼函式。

renderDrawerContent

回呼函式，會傳回一個 React 元素，作為抽屜的內容呈現。

layout

包含容器版面配置的物件。預設為應用程式視窗的維度。

drawerPosition

抽屜在畫面上的位置。在 RTL 模式中預設為 right，在其他情況下則為 left。

drawerType

抽屜的種類。用於決定抽屜的外觀和動畫方式。

• front：傳統抽屜，會在螢幕上覆蓋一個圖層並在後方顯示。
• back：輕掃時，會在螢幕後方顯示抽屜。
• 滑動：在滑動後，螢幕和抽屜同時滑動以顯示抽屜。
• 永久：顯示一個永久的抽屜作為側邊欄。

在 iOS 上預設為 滑動，而在其他平台上預設為 前面。

抽屜樣式

抽屜樣式物件。您可以為抽屜傳送自訂背景顏色或自訂寬度。

覆蓋樣式

覆蓋樣式物件。

hideStatusBarOnOpen

在抽屜開啟時，是否隱藏狀態列。預設為 false。

鍵盤關閉模式

在抽屜開啟時，是否關閉鍵盤。支援的值為

• none：在抽屜開啟時，不會關閉鍵盤。
• on-drag：在使用滑動手勢開啟抽屜時，將關閉鍵盤。

預設為 on-drag。

statusBarAnimation

在狀態列隱藏時，應使用的動畫。支援的值為

• 滑動：狀態列將滑動出視窗外。
• 淡出：狀態列將淡出出視窗外。
• none：狀態列將不會執行動畫。

請將它與 hideStatusBarOnOpen 結合使用。

swipeEnabled

是否啟用滑動手勢以開啟抽屜。預設為 true。

僅 iOS 和 Android 支援滑動手勢。

swipeEdgeWidth

滑動手勢應在距離螢幕邊緣多遠處啟動。預設為 32。

僅 iOS 和 Android 支援此功能。

swipeMinDistance

應啟動抽屜開啟的最小滑動距離。預設為 60。

僅 iOS 和 Android 支援此功能。

swipeMinVelocity

應啟動抽屜開啟的最小滑動速度。預設為 500。

僅 iOS 和 Android 支援此功能。

gestureHandlerProps

傳遞至基礎中的平移手勢處理常式常數。

僅 iOS 和 Android 支援此功能。

children

抽屜應包覆的內容。

useDrawerProgress

useDrawerProgress 鉤子傳回 Reanimated SharedValue (使用現代實作) 或 Reanimated Node (使用傳統實作)，它會顯示抽屜的進度。可用於對畫面的內容進行動畫化。

使用現代實作範例

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

使用傳統實作範例

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

// ...

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

  // If you are on react-native-reanimated 1.x, use `Animated.interpolate` instead of `Animated.interpolateNode`
  const translateX = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });

  return (
    <Animated.View style={{ transform: [{ translateX }] }}>
      {/* ... */}
    </Animated.View>
  );
}

如果您使用類別組件，您可以使用 DrawerProgressContext 來取得進度值。

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

// ...

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

  render() {
    const progress = this.context;

    // ...
  }
}