本文へスキップ
バージョン: 6.x

React Native Drawer レイアウト

react-native-gesture-handlerとreact-native-reanimatedを使用して実装された、React Native向けのクロスプラットフォームドロワーコンポーネントです。

このパッケージはReact Navigationと統合されていません。ドロワーレイアウトをReact Navigationのナビゲーションシステムと統合したい場合（例：ドロワーに画面を表示し、navigation.navigateなどを使用して画面間を移動したい場合）、代わりにDrawer Navigatorを使用してください。

インストール​

このパッケージを使用するには、プロジェクトルートでターミナルを開き、以下のコマンドを実行します。

npm install 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 install 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向けに開発している場合は、Cocoapodsを使用してpodをインストールしてリンクを完了する必要があります。

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​

アニメーションとジェスチャーを伴うドロワーをレンダリングするコンポーネントです。

Drawer プロパティ​

open​

ドロワーが開いているかどうか。

onOpen​

ドロワーが開かれたときに呼び出されるコールバック。

onClose​

ドロワーが閉じられたときに呼び出されるコールバック。

renderDrawerContent​

ドロワーの内容としてレンダリングするReact要素を返すコールバック。

layout​

コンテナのレイアウトを含むオブジェクト。アプリケーションウィンドウのサイズにデフォルト設定されます。

drawerPosition​

画面上のドロワーの位置。RTLモードではright、それ以外の場合はleftにデフォルト設定されます。

drawerType​

ドロワーの種類。ドロワーの外観とアニメーションを決定します。

  • front: 画面を覆い、背後にオーバーレイを表示する従来のドロワー。
  • back: スワイプすると、画面の背後にドロワーが表示されます。
  • slide: スワイプすると、画面とドロワーの両方がスライドしてドロワーが表示されます。
  • permanent: サイドバーとして常に表示されるドロワー。

iOSではslide、その他のプラットフォームでは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でのみサポートされています。

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;

    // ...
  }
}