「ReactNavigation3xシリーズチュートリアル」createDrawerNavigator開発ガイド
React Navigation 3x Series Tutorialcreatedrawernavigator Development Guide
この記事はあなたと共有されます。 createDrawerNavigator いくつかの開発ガイドと実用的なヒント。
createDrawerNavigator
引き出し効果、サイドスライドアウト:
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によってロードされると、anavigation
が割り当てられます。小道具。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 } }
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())
ルーティング名openDrawer
サイドバーを開く操作に対応DrawerClose
サイドバーを閉じる操作に対応toggleDrawer
サイドバー操作の切り替えに対応、これらを行うための操作が必要です操作。navigation
、navigation
小道具から取得できます
- サイドバーを開きます:
navigation.openDrawer()
; - サイドバーを閉じます:
navigation.closeDrawer()
; - サイドバーを切り替えます:
navigation.toggleDrawer()
;
その他のAPI
[ケース1] DrawerNavigatorを使用して、インターフェイスをナビゲートし、navigationOptionsを構成し、サイドバーをカスタマイズします。
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) => ( ) } )
ステップ2:navigationOptionsを構成します。
DrawerNavigatorのnavigationOptionsには、tabBarLabelタグとtabBarIconアイコンの2つの主要なプロパティがあります。
Page4: { screen: Page4, navigationOptions: { drawerLabel: 'Page4', drawerIcon: ({tintColor}) => ( ), } },
上記のコードで使用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つのステップに分けることができます。
-
- ナビゲーションを取得する:
const {navigation} = this.props
-
- by
navigate(routeName, params, action)
ページをジャンプさせる:
- by
navigation.navigate('Page5') })
カスタムサイドバー
DrawerNavigatorのサイドバーの効果がニーズを満たさない場合は、次のパスを渡すことができますcontentComponent
プロパティはサイドバーからのものです。
contentComponent:(props) => ( )
- React Navigation3xの使い方を学びながら問題が発生している人は誰でも、次のことができます。 ReactNavigation3xビデオチュートリアル 答えを探しています。
- また、合格することもできます 高品質のオンラインアプリビデオチュートリアルを作成するためのReactNative + Reduxの最新バージョン React Navigationによって開発された実践的な経験とスキル、および最適化のアイデアの詳細をご覧ください。