「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つのパラメーターscreenpathおよび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サイドバー操作の切り替えに対応、これらを行うための操作が必要です操作。navigationnavigation小道具から取得できます

  • サイドバーを開きます: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) => ( )