ドロワーナビゲーター

ドロワーナビゲーターは、画面の側面にナビゲーションドロワーを表示し、ジェスチャーで開閉できます。

これはreact-native-drawer-layoutをラップします。React Navigationの統合なしでドロワーを使用する場合は、代わりにライブラリを直接使用してください。

インストール

このナビゲーターを使用するには、@react-navigation/nativeとその依存関係がインストールされていることを確認し（このガイドに従ってください）、@react-navigation/drawerをインストールしてください。

npm

npm install @react-navigation/drawer

Yarn

yarn add @react-navigation/drawer

pnpm

pnpm add @react-navigation/drawer

次に、ドロワーナビゲーターに必要なライブラリをインストールして設定する必要があります。

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向けに開発している場合は、リンクを完了するために、ポッドを（Cocoapods経由で）インストールする必要もあります。

npx pod-install ios

API定義

このドロワーナビゲーターを使用するには、@react-navigation/drawerからインポートします。

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

注記

完全な使用ガイドについては、ドロワーナビゲーションをご覧ください。

プロパティ

Drawer.Navigatorコンポーネントは、以下のプロパティを受け入れます。

id

ナビゲーターの一意のID（オプション）。これは、navigation.getParentと組み合わせて、子ナビゲーターでこのナビゲーターを参照するために使用できます。

initialRouteName

ナビゲーターの初回ロード時にレンダリングするルートの名前。

screenOptions

ナビゲーターの画面に使用するデフォルトのオプション。

backBehavior

ナビゲーターでgoBackが呼び出されたときの動作を制御します。これには、Androidでのデバイスの戻るボタンの押下または戻るジェスチャーが含まれます。

以下の値をサポートしています。

• firstRoute - ナビゲーターで定義された最初の画面に戻る（デフォルト）
• initialRoute - initialRouteNameプロパティで渡された初期画面に戻る。渡されない場合は、最初の画面がデフォルトになります。
• order - フォーカスされている画面の前に定義された画面に戻る
• history - ナビゲーターで最後にアクセスした画面に戻る。同じ画面に複数回アクセスした場合、古いエントリは履歴から削除されます。
• none - 戻るボタンを処理しない

defaultStatus

ドロワーのデフォルトの状態 - ドロワーがデフォルトでopenまたはclosedのどちらの状態でいるか。

これがopenに設定されている場合、ドロワーは初期レンダリングから開いた状態になります。ジェスチャーまたはプログラムで通常どおり閉じることができます。ただし、戻ると、ドロワーが閉じられていた場合は再び開きます。これは、ドロワーがclosedから始まり、戻るボタンが開いているドロワーを閉じるという、ドロワーのデフォルトの動作とは基本的に反対です。

detachInactiveScreens

メモリを節約するために、非アクティブな画面をビュー階層からデタッチするかどうかを示すブール値。react-native-screensとの統合を可能にします。デフォルトはtrueです。

useLegacyImplementation

Reanimated 1に基づくレガシー実装を使用するかどうか。Reanimated 2に基づく新しい実装の方がパフォーマンスは向上しますが、追加の設定が必要であり、デバッグにはFlipperでHermesを使用する必要があります。

以下の場合、デフォルトはtrueです。

• Reanimated 2が設定されていない
• アプリがChromeデバッガーに接続されている（Reanimated 2はChromeデバッガーでは使用できません）
• アプリがWeb上で実行されている

それ以外の場合、デフォルトはfalseです。

drawerContent

ドロワーのコンテンツとしてレンダリングするReact要素（例：ナビゲーションアイテム）を返す関数。

コンテンツコンポーネントは、デフォルトで以下のプロパティを受け取ります。

• state - ナビゲーターのナビゲーション状態。
• navigation - ナビゲーターのナビゲーションオブジェクト。
• descriptors - ドロワー画面のオプションを含む記述子オブジェクト。オプションには、descriptors[route.key].optionsでアクセスできます。

カスタムdrawerContentの提供

ドロワーのデフォルトコンポーネントはスクロール可能で、RouteConfigのルートへのリンクのみが含まれています。デフォルトコンポーネントを簡単にオーバーライドして、ヘッダー、フッター、またはその他のコンテンツをドロワーに追加できます。デフォルトのコンテンツコンポーネントは、DrawerContentとしてエクスポートされます。これは、ScrollView内にDrawerItemListコンポーネントをレンダリングします。

デフォルトでは、ドロワーはスクロール可能で、ノッチ付きデバイスをサポートしています。コンテンツをカスタマイズする場合、DrawerContentScrollViewを使用してこれを自動的に処理できます。

import {
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
    </DrawerContentScrollView>
  );
}

ドロワーにアイテムを追加するには、DrawerItemコンポーネントを使用できます。

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Help"
        onPress={() => Linking.openURL('https://mywebsite.com/help')}
      />
    </DrawerContentScrollView>
  );
}

DrawerItemコンポーネントは、以下のプロパティを受け入れます。

• label（必須）：アイテムのラベルテキスト。文字列、またはreact要素を返す関数を使用できます。例：({ focused, color }) => <Text style={{ color }}>{focused ? 'フォーカスされたテキスト' : 'フォーカスされていないテキスト'}</Text>。
• icon：アイテムに表示するアイコン。react要素を返す関数を受け入れます。例：({ focused, color, size }) => <Icon color={color} size={size} name={focused ? 'heart' : 'heart-outline'} />。
• focused：ドロワーアイテムをアクティブとして強調表示するかどうかを示すブール値。
• onPress（必須）：押下時に実行する関数。
• activeTintColor：アイテムがアクティブな場合のアイコンとラベルの色。
• inactiveTintColor：アイテムが非アクティブな場合のアイコンとラベルの色。
• activeBackgroundColor：アイテムがアクティブな場合の背景色。
• inactiveBackgroundColor：アイテムが非アクティブな場合の背景色。
• labelStyle：ラベルTextのスタイルオブジェクト。
• style：ラッパーViewのスタイルオブジェクト。

progress オブジェクトを使用すると、drawerContent で、ドロワーコンテンツの視差モーションなどの興味深いアニメーションを実行できます。

function CustomDrawerContent(props) {
  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 }] }}>
      {/* ... drawer contents */}
    </Animated.View>
  );
}

progress オブジェクトは、Reanimated 1 を使用している場合は Reanimated の Node（useLegacyImplementation を参照）、それ以外の場合は SharedValue です。これは、ドロワーのアニメーション化された位置を表します（0 は閉じている状態、1 は開いている状態）。

useNavigation フックは画面内でのみ使用できるため、drawerContent 内では **使用できません**。代わりに使用できる navigation プロップが drawerContent に提供されます。

function CustomDrawerContent({ navigation }) {
  return (
    <Button
      title="Go somewhere"
      onPress={() => {
        // Navigate using the `navigation` prop that you received
        navigation.navigate('SomeScreen');
      }}
    />
  );
}

カスタムコンポーネントを使用するには、drawerContent プロップに渡す必要があります。

<Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
  {/* screens */}
</Drawer.Navigator>

オプション

以下の オプション を使用して、ナビゲーター内の画面を設定できます。これらは、Drawer.navigator の screenOptions プロップまたは Drawer.Screen の options プロップで指定できます。

title

headerTitle と drawerLabel のフォールバックとして使用できる汎用タイトルです。

lazy

この画面を初めてアクセスしたときにレンダリングするかどうか。デフォルトは true です。初期レンダリング時に画面をレンダリングする場合は、false に設定します。

drawerLabel

ドロワーサイドバーに表示する、文字列または { focused: boolean, color: string } を受け取って React.Node を返す関数です。未定義の場合、シーンの title が使用されます。

drawerIcon

ドロワーサイドバーに表示する、{ focused: boolean, color: string, size: number } を受け取って React.Node を返す関数です。

drawerActiveTintColor

ドロワーのアクティブなアイテムのアイコンとラベルの色です。

drawerActiveBackgroundColor

ドロワーのアクティブなアイテムの背景色です。

drawerInactiveTintColor

ドロワーの非アクティブなアイテムのアイコンとラベルの色です。

drawerInactiveBackgroundColor

ドロワーの非アクティブなアイテムの背景色です。

drawerItemStyle

アイコンまたはラベル（あるいはその両方）を含むことができる、単一アイテムのスタイルオブジェクトです。

drawerLabelStyle

ラベルをレンダリングするコンテンツセクション内の Text スタイルに適用するスタイルオブジェクトです。

drawerContentContainerStyle

ScrollView 内のコンテンツセクションのスタイルオブジェクトです。

drawerContentStyle

ラッパービューのスタイルオブジェクトです。

drawerStyle

ドロワーコンポーネントのスタイルオブジェクトです。ドロワーのカスタム背景色またはカスタム幅をここで渡すことができます。

<Drawer.Navigator
  screenOptions={{
    drawerStyle: {
      backgroundColor: '#c6cbef',
      width: 240,
    },
  }}
>
  {/* screens */}
</Drawer.Navigator>

drawerPosition

オプションは left または right です。LTR 言語ではデフォルトで left、RTL 言語では right です。

drawerType

ドロワーのタイプ。ドロワーの外観とアニメーションの方法を決定します。

• front：画面を背後のオーバーレイで覆う従来のドロワーです。
• back：スワイプすると画面の背後にドロワーが表示されます。
• slide：スワイプすると画面とドロワーの両方がスライドしてドロワーが表示されます。
• permanent：永続的なドロワーはサイドバーとして表示されます。大きな画面で常にドロワーを表示する場合に便利です。

iOS ではデフォルトで slide、その他のプラットフォームでは front です。

drawerType を条件付きで指定して、大きな画面では永続的なドロワーを、小さな画面では従来のドロワーを表示できます。

import { useWindowDimensions } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  const dimensions = useWindowDimensions();

  return (
    <Drawer.Navigator
      screenOptions={{
        drawerType: dimensions.width >= 768 ? 'permanent' : 'front',
      }}
    >
      {/* Screens */}
    </Drawer.Navigator>
  );
}

画面サイズに基づいて drawerStyle などの他のプロップを指定して、動作をカスタマイズすることもできます。たとえば、defaultStatus="open" と組み合わせて、マスター詳細レイアウトを実現できます。

import { useWindowDimensions } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  const dimensions = useWindowDimensions();

  const isLargeScreen = dimensions.width >= 768;

  return (
    <Drawer.Navigator
      defaultStatus="open"
      screenOptions={{
        drawerType: isLargeScreen ? 'permanent' : 'back',
        drawerStyle: isLargeScreen ? null : { width: '100%' },
        overlayColor: 'transparent',
      }}
    >
      {/* Screens */}
    </Drawer.Navigator>
  );
}

drawerHideStatusBarOnOpen

true に設定すると、ドロワーが引かれたとき、または「開いている」状態のときに、ドロワーは OS のステータスバーを非表示にします。

drawerStatusBarAnimation

ステータスバーを非表示にするときのアニメーション。hideStatusBar と組み合わせて使用​​します。

サポートされている値

• slide
• fade
• none

これは iOS でのみサポートされています。デフォルトは slide です。

overlayColor

ドロワーが開いたときにコンテンツビューの上に表示されるカラーオーバーレイ。不透明度は、ドロワーが開くと 0 から 1 にアニメーション化されます。

sceneContainerStyle

画面コンテンツをラップするコンポーネントのスタイルオブジェクトです。

gestureHandlerProps

基盤となるパンジェスチャハンドラーに渡すプロップです。

これは Web ではサポートされていません。

swipeEnabled

スワイプジェスチャを使用してドロワーを開閉できるかどうか。デフォルトは true です。

スワイプジェスチャは Web ではサポートされていません。

swipeEdgeWidth

コンテンツビューの端からどれだけ離れた場所からスワイプジェスチャをアクティブにするかを定義できます。

これは Web ではサポートされていません。

swipeMinDistance

ドロワーを開くことをアクティブにする必要がある最小スワイプ距離のしきい値です。

keyboardDismissMode

スワイプジェスチャが開始されたときにキーボードを閉じるかどうか。デフォルトは 'on-drag' です。キーボード処理を無効にするには、'none' に設定します。

unmountOnBlur

この画面から移動したときに、この画面をアンマウントするかどうか。画面をアンマウントすると、画面内のローカル状態と、画面内のネストされたナビゲーターの状態がリセットされます。デフォルトは false です。

通常、ユーザーは画面を切り替えるときにナビゲーション履歴が失われることを期待していないため、このプロップを有効にすることはお勧めしません。このプロップを有効にする場合は、これが実際にユーザーエクスペリエンスを向上させるかどうかを検討してください。

freezeOnBlur

非アクティブな画面の再レンダリングを防ぐかどうかを示すブール値。デフォルトは false です。アプリケーションの開始時に react-native-screens パッケージから enableFreeze() が実行されると、デフォルトで true になります。

react-native-screens バージョン >=3.16.0 が必要です。

iOS と Android でのみサポートされています。

ヘッダー関連のオプション

ヘッダー関連のオプションのリストはこちらにあります。これらの オプション は、Drawer.navigator の screenOptions プロップまたは Drawer.Screen の options プロップで指定できます。これらのオプションを使用するために @react-navigation/elements を直接使用する必要はありません。それらは単にそのページでドキュメント化されています。

これらに加えて、ドロワーでは以下のオプションもサポートされています。

header

デフォルトのヘッダーの代わりに使用するカスタムヘッダーです。

これは、ヘッダーとして表示する React 要素を返す関数を 허용합니다。関数は、引数として以下のプロパティを含むオブジェクトを受け取ります。

• navigation - 現在の画面のナビゲーションオブジェクトです。
• route - 現在の画面のルートオブジェクトです。
• options - 現在の画面のオプションです。
• layout - 画面の寸法。height プロパティと width プロパティが含まれています。

例

import { getHeaderTitle } from '@react-navigation/elements';

// ..

header: ({ navigation, route, options }) => {
  const title = getHeaderTitle(options, route.name);

  return <MyHeader title={title} style={options.headerStyle} />;
};

ナビゲーター内のすべての画面にカスタムヘッダーを設定するには、ナビゲーターの screenOptions プロップでこのオプションを指定します。

headerStyle に height を指定する

カスタムヘッダーの高さがデフォルトのヘッダーの高さとは異なる場合、測定が非同期であるためにグリッチが発生することがあります。高さを明示的に指定することで、このようなグリッチを回避できます。

例

headerStyle: {
  height: 80, // Specify the height of your custom header
};

カスタムヘッダーのスタイルは自分で制御するため、このスタイルはデフォルトではヘッダーに適用されません。このスタイルをヘッダーにも適用する場合は、props から options.headerStyle を使用してください。

headerShown

画面のヘッダーを表示するか非表示にするか。ヘッダーはデフォルトで表示されます。これを false に設定すると、ヘッダーが非表示になります。

イベント

ナビゲーターは、特定のアクションでイベントを発生させることができます。サポートされているイベントは次のとおりです。

drawerItemPress

このイベントは、ユーザーがドロワー内の画面のボタンを押したときに発生します。デフォルトでは、ドロワーアイテムの押下はいくつかのことを行います。

• 画面にフォーカスがない場合、ドロワーアイテムを押すとその画面にフォーカスが当たります。
• 画面に既にフォーカスがある場合は、ドロワーが閉じます。

デフォルトの動作を防ぐには、event.preventDefault を呼び出します。

React.useEffect(() => {
  const unsubscribe = navigation.addListener('drawerItemPress', (e) => {
    // Prevent default behavior
    e.preventDefault();

    // Do something manually
    // ...
  });

  return unsubscribe;
}, [navigation]);

カスタムドロワーコンテンツがある場合は、必ずこのイベントを発生させてください。

ヘルパー

ドロワーナビゲーターは、ナビゲーションpropに次のメソッドを追加します。

openDrawer

ドロワーペインを開きます。

navigation.openDrawer();

closeDrawer

ドロワーペインを閉じます。

navigation.closeDrawer();

toggleDrawer

ドロワーペインが閉じている場合は開き、開いている場合は閉じます。

navigation.toggleDrawer();

jumpTo

ドロワーナビゲーター内の既存の画面に移動します。このメソッドは次の引数を受け入れます。

• name - string - ジャンプ先のルートの名前。
• params - object - 目的のルートに渡す画面パラメーター。

navigation.jumpTo('Profile', { owner: 'Satya' });

例

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Feed">
      <Drawer.Screen
        name="Feed"
        component={Feed}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={Notifications}
        options={{ drawerLabel: 'Updates' }}
      />
      <Drawer.Screen
        name="Profile"
        component={Profile}
        options={{ drawerLabel: 'Profile' }}
      />
    </Drawer.Navigator>
  );
}

ドロワーが開いているかどうかの確認

useDrawerStatus フックを使用して、ドロワーが開いているかどうかを確認できます。

import { useDrawerStatus } from '@react-navigation/drawer';

// ...

const isDrawerOpen = useDrawerStatus() === 'open';

フックを使用できない場合は、getDrawerStatusFromState ヘルパーを使用することもできます。

import { getDrawerStatusFromState } from '@react-navigation/drawer';

// ...

const isDrawerOpen = getDrawerStatusFromState(navigation.getState()) === 'open';

クラスコンポーネントの場合、state イベントをリッスンして、ドロワーが開いたり閉じたりしたかどうかを確認できます。

class Profile extends React.Component {
  componentDidMount() {
    this._unsubscribe = navigation.addListener('state', () => {
      const isDrawerOpen =
        getDrawerStatusFromState(navigation.getState()) === 'open';

      // do something
    });
  }

  componentWillUnmount() {
    this._unsubscribe();
  }

  render() {
    // Content of the component
  }
}

ドロワーナビゲーターを他のナビゲーター内にネストする

ドロワーナビゲーターが、タブナビゲーターやスタックナビゲーターなど、UI を提供する別のナビゲーター内にネストされている場合、ドロワーはそれらのナビゲーターの UI の下にレンダリングされます。ドロワーはタブバーの下とスタックのヘッダーの下に表示されます。ドロワーを UI の上にレンダリングする必要があるナビゲーターの親として、ドロワーナビゲーターを作成する必要があります。