反応ナビゲーション

「ReactNavigation3xシリーズチュートリアル」createDrawerNavigator開発ガイド



React Navigation 3x Series Tutorialcreatedrawernavigator Development Guide



この記事はあなたと共有されます。 createDrawerNavigator いくつかの開発ガイドと実用的なヒント。

createDrawerNavigator引き出し効果、サイドスライドアウト：



904056-28aeb71b0cf5dd8f.jpg createDrawerNavigator.png

createDrawerNavigator API

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig):



  • RouteConfigs（必須）：ルート構成オブジェクトは、ルート名からルート構成へのマッピングであり、ナビゲーターにルートが何であるかを通知します。
  • DrawerNavigatorConfig（オプション）：ナビゲーターのルート（デフォルトの最初の画面、navigationOptions、パスなど）スタイル（遷移モードモード、ヘッドモードなど）を構成します。

createDrawerNavigator API createDrawerNavigator Support through RouteConfigs with DrawerNavigatorConfig createDrawerNavigatorナビゲーターを作成するための2つのパラメーターから確認できます。

RouteConfigs

RouteConfigsは、3つのパラメーターscreen、pathおよびnavigationOptions;をサポートします。

  • screen（必須）：画面のメイン表示コンテンツとしてReactコンポーネントを指定します。このコンポーネントがDrawerNavigatorによってロードされると、a navigationが割り当てられます。小道具。
  • path（オプション）：スキーマジャンプの使用をサポートするように設定するために使用されます。特定の使用は以下に関連しますSchemaこの章で説明したように
  • navigationOptions（オプション）：title、headerRight、headerLeftなどのグローバル画面ナビゲーションオプションを構成するために使用されます。

DrawerNavigatorConfig

  • 引き出し幅：サイドメニューの幅を設定します



  • drawerPosition：サイドメニューの位置を設定し、「左」、「右」をサポートします。デフォルトは「左」です。

  • contentComponent：ナビゲーション項目など、ドロワーナビゲーターのコンテンツをレンダリングするために使用されるコンポーネント。ドロワーナビゲーターのナビゲーションプロパティを受け取ります。デフォルトはDrawerItemsです。詳細は以下をご覧ください

  • contentOptions：ドロワーナビゲーターのコンテンツを構成します。以下を参照してください。

  • useNativeAnimations：ネイティブアニメーションを有効にするかどうか、デフォルトで有効

  • drawerBackgroundColor：サイドメニューの背景

  • initialRouteName：どのインターフェースがルートインターフェースであるかを初期化します。構成されていない場合、RouteConfigsの最初のページがデフォルトでルートインターフェイスとして使用されます。

  • 順序：ドロワーの並べ替え、デフォルトではルーティングの順序を構成します

  • パス：routeConfigsで設定されたパスをオーバーライドするpathconfigへのrouteNameのマップを提供します。

  • backBehavior：戻るボタンを押すと、ラベルが最初の引き出しに切り替わりますか？はいの場合は、最初のドロワーに切り替えるように設定します。それ以外の場合は、何もしません。デフォルトでは、最初のドロワーに切り替えます。

カスタムサイドバー（contentComponent）

DrawerNavigatorには、スクロール付きのデフォルトのサイドバーがあります。このサイドバーコンポーネントを書き直すことで、サイドバーをカスタマイズすることもできます。

contentComponent:(props) => ( )

DrawerItemsのContentOptions

contentOptionsは、主にサイドバーアイテムの属性を構成します。たとえば、先ほど作成した例のDrawerItemsの場合のみ、この属性を使用して色、背景色などを構成できます。その主な属性は次のとおりです。

  • アイテム：ルートを変更する場合に変更または上書きできるルートの配列
  • activeItemKey：現在選択されているページのキーを定義します
  • activeTintColor：アイテムの状態のテキストの色が選択されています
  • activeBackgroundColor：アイテムの背景色が選択されています
  • activeTintColor：アイテムの状態のテキストの色が選択されていません
  • activeBackgroundColor：アイテムの背景色が選択されていません
  • onItemPress：アイテムのコールバックを選択します。このパラメータープロパティは関数であり、現在のルートがコールバックされます
  • itemsContainerStyle：itemememコンテナのスタイルを定義します
  • itemStyle：アイテムのスタイルを定義します
  • labelStyle：アイテムテキストのスタイルを定義します
  • iconContainerStyle：アイテムアイコンコンテナのスタイルを定義します
  • activeLabelStyle：選択された状態のテキストスタイル
  • activeLabelStyle：選択されていない状態のテキストスタイル
  • iconContainerStyle：アイコンコンテナのスタイルを設定するために使用されます。

例えば：

contentOptions: { activeTintColor: '#e91e63', itemsContainerStyle: { marginVertical: 0, }, iconContainerStyle: { opacity: 1 } }

ヒント：この記事と併せて、ReactNavigation3xのビデオチュートリアルもあります。学ぶことへようこそ。

NavigationOptions（画面ナビゲーションオプション）

DrawerNavigatorでサポートされている画面ナビゲーションオプションのパラメータは次のとおりです。

  • タイトル：headerTitleおよびdrawerLabelの代替の一般的なタイトルとして使用できます。
  • 引き出しラベル：スライドタイトル
  • drawerIcon：タイトルアイコンをスキップします。ここでは2つのパラメータが返されます。
    • {focused: boolean, tintColor: string}：
      • フォーカス：選択されているかどうかを示します
      • tintColor：選択した色を示します
  • drawerLockMode：ドロワーのロックモードを指定します。これは、最上位ルーターでscreenProps.drawerLockModeを使用して動的に更新することもできます。

サイドバー操作（開閉、スイッチ）

サイドバーは、次の操作モードをサポートしています。

navigation.openDrawer() navigation.closeDrawer() navigation.toggleDrawer() //or navigation.dispatch(DrawerActions.openDrawer()) navigation.dispatch(DrawerActions.closeDrawer()) navigation.dispatch(DrawerActions.toggleDrawer())

ヒント：この記事と併せて、ReactNavigation3xのビデオチュートリアルもあります。学ぶことへようこそ。

ルーティング名openDrawerサイドバーを開く操作に対応DrawerCloseサイドバーを閉じる操作に対応toggleDrawerサイドバー操作の切り替えに対応、これらを行うための操作が必要です操作。navigation、navigation小道具から取得できます

  • サイドバーを開きます：navigation.openDrawer()；
  • サイドバーを閉じます：navigation.closeDrawer()；
  • サイドバーを切り替えます：navigation.toggleDrawer()；

その他のAPI

[ケース1] DrawerNavigatorを使用して、インターフェイスをナビゲートし、navigationOptionsを構成し、サイドバーをカスタマイズします。

904056-805c08aebfafe9d0.gif createDrawerNavigator

ステップ1：タイプcreateDrawerNavigatorのナビゲーターを作成する

export const DrawerNav = createDrawerNavigator({ Page4: { screen: Page4, navigationOptions: { drawerLabel: 'Page4', drawerIcon: ({tintColor}) => ( ), } }, Page5: { screen: Page5, navigationOptions: { drawerLabel: 'Page5', drawerIcon: ({tintColor}) => ( ), } }, }, { initialRouteName: 'Page4', contentOptions: { activeTintColor: '#e91e63', }, contentComponent:(props) => ( ) } )

ヒント：この記事と併せて、ReactNavigation3xのビデオチュートリアルもあります。学ぶことへようこそ。

ステップ2：navigationOptionsを構成します。

DrawerNavigatorのnavigationOptionsには、tabBarLabelタグとtabBarIconアイコンの2つの主要なプロパティがあります。

Page4: { screen: Page4, navigationOptions: { drawerLabel: 'Page4', drawerIcon: ({tintColor}) => ( ), } },

ヒント：この記事と併せて、ReactNavigation3xのビデオチュートリアルもあります。学ぶことへようこそ。

上記のコードで使用react-native-vector-iconsベクターアイコンはタブの表示アイコンとして機能し、drawerIconは必要に応じてカスタマイズできるReactコンポーネントを受け取ります。

  • tintColor：現在の状態のアイテムの色
  • 焦点：アイテムが選択されているかどうか

3番目のステップ：インターフェースジャンプ

render() { const {navigation} = this.props return Welcome to Page5 navigation.openDrawer()} title='Open drawer' /> navigation.toggleDrawer()} title='Toggle drawer' /> navigation.navigate('Page4')} title='Go to Page4' /> }

コード解析：

ページジャンプは2つのステップに分けることができます。

    1. ナビゲーションを取得する：
    const {navigation} = this.props
    1. by navigate(routeName, params, action)ページをジャンプさせる：
navigation.navigate('Page5') })

カスタムサイドバー

DrawerNavigatorのサイドバーの効果がニーズを満たさない場合は、次のパスを渡すことができますcontentComponentプロパティはサイドバーからのものです。

contentComponent:(props) => ( )