react-navigation / react-navigation/react-navigation.github.io
Clarify StackNavigator inside DrawerNavigator gotchas
まだ誰も着手していません。
- 主要言語
- JavaScript
- スター
- 324
- フォーク
- 2k
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
Moved from https://github.com/react-navigation/react-navigation/issues/3890
Using multiple Navigators inside a DrawerNavigator, where the subnavigators shared a route name, led to unexpected (undocumented) behavior
| software | version |
|---|---|
| react-navigation | 1.5.9 |
| react-native | expo@26 |
Context
I was an early user of @expo/ex-navigation, and have recently been upgrading to react-navigation. I came across some faults in either the DrawerNavigation documentation or in the general mental framework of react-navigation.
Current Behavior
When nesting navigators inside a DrawerNavigator, duplicated route names behave unexpectedly (in my mental model).
Expo Snack repro
const WidgetStack = StackNavigator({
Widget: {
screen: WidgetScreen,
},
// This is very easy to get wrong, it is not clear in the Drawer documentation
// that this route name should be distinct.
Settings: {
screen: SettingsScreen,
},
});
const SettingsStack = StackNavigator({
Settings: {
screen: SettingsScreen,
},
});
const DrawerApp = DrawerNavigator({
Widget: {
screen: WidgetStack,
},
Settings: {
screen: SettingsStack,
},
}, {
initialRouteName: 'Widget',
});
When tapping on the "Settings" drawer item, I expected the currently selected "tab" in the drawer to be "Settings", I expected no routes to be "pushed" onto my stack navigator. Instead, the "widget" tab stays selected, and a settings route is pushed onto the WidgetStack.
There were no pieces of documentation to warn me of this behavior, and it was actually very difficult to even tell this is what was happening (it was much easier when I decided to build the minimal repro).
My current mental model
My mental model for react-navigation was previously that each nested navigator was a "subtree". With that model, I saw no issue with a duplicated route name.
DrawerApp
/ \
WidgetStack SettingsStack
| | |
/ \ Settings
Widget Settings
I'm not here to debate whether this is the correct model, but a simple piece of documentation would have saved me about an entire day :(
I would be happy to submit a PR to address this, but it appears with the 2.0 push, this might be out of date, and furthermore - I am not sure if my current model is correct enough to even write docs.
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
DrawerNavigator とネストされた StackNavigator のドキュメントから始め、リンクされている Expo Snack と参照されている 2.0 push を確認して、その動作が現在も当てはまるかどうかを判断します。関連するドキュメントを更新し、重複した route-name に関する落とし穴とネストのモデルを説明するとともに、何が完了したものとしてドキュメント化されているかを示す現在の例または再現を記載します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react, react-native
- 領域
- documentation, mobile-dev
- issue の種類
- ドキュメント
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 30/100