メインコンテンツへスキップ

DrawerLayoutAndroid

プラットフォームのDrawerLayoutをラップするReactコンポーネントです（Androidのみ）。Drawer（通常、ナビゲーションに使用されます）はrenderNavigationViewでレンダリングされ、直接の子はメインビュー（コンテンツが配置される場所）です。ナビゲーションビューは最初は画面に表示されませんが、drawerPositionプロップで指定されたウィンドウの側面から引き出すことができ、その幅はdrawerWidthプロップで設定できます。

例​

リファレンス

Props​

View Props​

ViewのPropsを継承します。

drawerBackgroundColor​

ドロワーの背景色を指定します。デフォルト値はwhiteです。ドロワーの不透明度を設定したい場合は、rgbaを使用します。例

tsx
return (
  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
型必須
colorNo

drawerLockMode​

ドロワーのロックモードを指定します。ドロワーは3つの状態にロックできます。

  • unlocked（デフォルト）：ドロワーがタッチジェスチャーに応答（開閉）します。
  • locked-closed：ドロワーは閉じたままで、ジェスチャーに応答しません。
  • locked-open：ドロワーは開いたままで、ジェスチャーに応答しません。ドロワーはプログラムで（openDrawer/closeDrawer）開閉することはできます。
型必須
enum('unlocked', 'locked-closed', 'locked-open')No

drawerPosition​

ドロワーが画面のどの側面からスライドインするかを指定します。デフォルトではleftに設定されています。

型必須
enum('left', 'right')No

drawerWidth​

ドロワーの幅、より正確にはウィンドウの端から引き出されるビューの幅を指定します。

型必須
numberNo

keyboardDismissMode​

ドラッグに応答してキーボードが閉じるかどうかを決定します。

  • 'none'（デフォルト）：ドラッグしてもキーボードは閉じません。
  • 'on-drag'：ドラッグが開始されるとキーボードが閉じます。
型必須
enum('none', 'on-drag')No

onDrawerClose​

ナビゲーションビューが閉じられるたびに呼び出される関数。

型必須
functionNo

onDrawerOpen​

ナビゲーションビューが開かれるたびに呼び出される関数。

型必須
functionNo

onDrawerSlide​

ナビゲーションビューとのインタラクションがあるたびに呼び出される関数。

型必須
functionNo

onDrawerStateChanged​

ドロワーの状態が変化したときに呼び出される関数。ドロワーは3つの状態をとることができます。

  • idle：現時点でナビゲーションビューとのインタラクションがない状態。
  • dragging：現時点でナビゲーションビューとのインタラクションがある状態。
  • settling：ナビゲーションビューとのインタラクションがあり、ナビゲーションビューが閉じるまたは開くアニメーションを完了している状態。
型必須
functionNo

renderNavigationView​

画面の側面にレンダリングされ、引き出すことができるナビゲーションビュー。

型必須
functionはい

statusBarBackgroundColor​

ドロワーが画面全体を占めるようにし、ステータスバーの上に開くことができるようにステータスバーの背景を描画します。API 21+でのみ効果があります。

型必須
colorNo

Methods​

closeDrawer()​

tsx
closeDrawer();

ドロワーを閉じます。

openDrawer()​

tsx
openDrawer();

ドロワーを開きます。