react-navigation / react-navigation/react-navigation.github.io
Clarify StackNavigator inside DrawerNavigator gotchas
還沒有人認領這個 Issue。
- 主要語言
- 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 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
先從 DrawerNavigator 和巢狀的 StackNavigator 文件開始,接著檢視連結的 Expo Snack 和所參照的 2.0 push,以判斷該行為是否仍然適用。更新相關文件,說明重複路由名稱這個陷阱和巢狀模型,並提供目前的範例或重現,顯示哪些內容已記錄為完成。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- javascript, react, react-native
- 領域
- documentation, mobile-dev
- Issue 類型
- 文件
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 活躍度
- 停滯
- 描述清晰度
- 基本清楚
- 新手友好度
- 30/100