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

DrawerLayoutAndroid

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

使用例​

リファレンス

Props​

ViewのProps​

ViewのPropsを継承します。

drawerBackgroundColor​

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

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

drawerLockMode​

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

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

drawerPosition​

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

型必須
enum('left', 'right')いいえ

drawerWidth​

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

型必須
numberいいえ

keyboardDismissMode​

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

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

onDrawerClose​

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

型必須
functionいいえ

onDrawerOpen​

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

型必須
functionいいえ

onDrawerSlide​

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

型必須
functionいいえ

onDrawerStateChanged​

ドロワーの状態が変更されたときに呼び出される関数。ドロワーは3つの状態になります

  • idle、その時点でナビゲーションビューとのインタラクションが発生していないことを意味します
  • dragging、現在ナビゲーションビューとのインタラクションがあることを意味します
  • settling、ナビゲーションビューとのインタラクションがあり、ナビゲーションビューが閉じるまたは開くアニメーションを完了しようとしていることを意味します
型必須
functionいいえ

renderNavigationView​

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

型必須
functionはい

statusBarBackgroundColor​

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

型必須
colorいいえ

メソッド​

closeDrawer()​

tsx
closeDrawer();

ドロワーを閉じます。

openDrawer()​

tsx
openDrawer();

ドロワーを開きます。