react-navigation / react-navigation/react-navigation.github.io

Recommended patterns for menus and dialogs

未關閉
#7 3 則留言 0 個 reaction 已指派 1 人 在 GitHub 檢視

@brentvatne 已經在處理了。

開始於 2018年2月6日。

help wanted high-priority
主要語言
JavaScript
星號
324
分支
2k
PR 合併指標
30 天內沒有已合併 PR

描述

Copied from https://github.com/react-navigation/react-navigation/issues/1315

The preferred pattern for handling dialogs and menus don't seem to have been discussed yet.

Menus that open from a more menu button are a fairly common pattern.

I can see 2 possible ways they might be implemented:

  • As part of params: Menu is part of a scene's children, headerRight uses setParams to set a param indicating the menu is open and that param is passed to whatever prop on the menu indicates it is open. Closing the menu is another setParams. One would have to either use <Modal /> or manually register a BackAndroid (now BackHandler) to handle the Android "back button closes menu instead of navigating backwards" pattern.
  • As a navigator: Menus are implemented as a part of a MenuNavigator (or maybe a ModalNavigator), the navigator is used in place of the screen for a route in your {Stack,Drawer,Tab}Navigator and accepts one route that is the normal screen and other routes are menus. Menus are opened using navigator.navigate('MenuName') and exited using navigator.goBack().

Dialogs are another modal type to consider (given the drawer is already considered a navigator).

Drawers make less sense as part of props but there are still 2-3 patterns I can think of for them:

  • A DialogNavigator: Just like the MenuNavigator/ModalNavigator I described a DialogNavigator would be used in place of a normal screen and allow navigator.navigate to open a specific dialog from the associated screen.
  • A top-level DialogNavigator: Instead of taking place of a deeper screen, the DialogNavigator would be top-level like the DrawerNavigator is. This would allow it to easily sit on top of everything else and put dialogs on top. Dialogs would become global, which could be a pro or a con depending on the app.
  • As part of StackNavigator: Instead of a whole separate navigator StackNavigator would be modified to support modals (routes that can have no headers of their own, are drawn transparently over top of the other screens, and have a separate transition type). From the nesting and navigation perspectives this is a little simpler. There is no extra nesting of navigators that could make navigation.navigate calls more complex in any scenario, opening a dialog by navigating to it is simple, and closing a dialog via navigator.goBack() is built-in. Also this would already handle full-screen dialogs pretty well and handle the tablet+mobile environment where a route may be a full-screen dialog with a header in the stack route on mobile but be a dialog on a tablet without a header.

Full-screen dialogs themselves are probably a separate more precise discussion.

貢獻指南

這個儲存庫沒有索引到貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。