react-native-navigation的迁移库

docs-modal.mdx 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. ---
  2. id: modal
  3. title: Modal
  4. sidebar_label: Modal
  5. ---
  6. import Tabs from '@theme/Tabs';
  7. import TabItem from '@theme/TabItem';
  8. import useBaseUrl from '@docusaurus/useBaseUrl';
  9. In human-centered design, when we speak about a modal (or modality), we often refer to a set of techniques, aimed at bringing user attention to a specific event / screen / action / etc. Those often require user input. A pop-up on a website, a file deletion confirmation dialogue on your computer, or an alert asking you to enable location service on your phone - these can all be considered modals.
  10. A modal is a term used in native iOS world ([full description here](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/)), while on Android, [dialogs](https://developer.android.com/guide/topics/ui/dialogs) are often used to create similar or identical behavior, alongside other techniques.
  11. ## Presenting modals
  12. Modal can be displayed by invoking the `Navigation.showModal()` command, as shown in the example below:
  13. ```js
  14. Navigation.showModal({
  15. stack: {
  16. children: [
  17. {
  18. component: {
  19. name: 'MODAL_SCREEN',
  20. options: {
  21. topBar: {
  22. title: {
  23. text: 'Modal'
  24. }
  25. }
  26. }
  27. }
  28. }
  29. ]
  30. }
  31. });
  32. ```
  33. Here's how the Modal looks on both platforms.
  34. <Tabs
  35. defaultValue="ios"
  36. values={[
  37. { label: 'iOS', value: 'ios', },
  38. { label: 'Android', value: 'android', }
  39. ]}>
  40. <TabItem value="ios">
  41. <img width="40%" src={useBaseUrl('img/modal_ios.gif')} />
  42. </TabItem>
  43. <TabItem value="android">
  44. <img width="40%" src={useBaseUrl('img/modal_android.gif')} />
  45. </TabItem>
  46. </Tabs>
  47. ## Adding a dismiss button
  48. Modals should always have a dismiss button, on left-to-right devices it's typically placed as a left button in the TopBar.
  49. After we've added our dismiss button, we need to dismiss the modal when the button is pressed.
  50. :::note
  51. For the LeftButton to be visible, the screen must be displayed in a Stack.
  52. :::
  53. ```js
  54. class ModalScreen extends React.Component {
  55. // Set a dismiss button in static options
  56. static options() {
  57. return {
  58. topBar: {
  59. leftButtons: {
  60. id: 'dismiss',
  61. icon: require('./dismiss.png')
  62. }
  63. }
  64. };
  65. }
  66. constructor(props) {
  67. super(props);
  68. // Register to events
  69. Navigation.events().bindComponent(this);
  70. }
  71. // Handle the button press event and dismiss the modal if needed
  72. navigationButtonPressed({ buttonId }) {
  73. if (buttonId === 'dismiss') {
  74. Navigation.dismissModal(this.props.componentId);
  75. }
  76. }
  77. }
  78. ```
  79. ## Transparent modals
  80. Showing transparent modals is a nice technique to increase immersiveness while keeping the user in the same context.
  81. When a modal is displayed the content behind it (either root or modal) is removed from hierarchy. While this behavior improves performance, it's undesired when
  82. showing transparent modals as we need to see the content behind it.
  83. To configure this behaviour, we'll need to change the `modalPresentationStyle` option to `overCurrentContext` and change the layout background color to `'transparent'`.
  84. ```js
  85. {
  86. modalPresentationStyle: 'overCurrentContext',
  87. layout: {
  88. backgroundColor: 'transparent'
  89. }
  90. }
  91. ```
  92. ## Preventing a Modal from being dismissed
  93. Preventing a modal from being dismissed is done differently for each platform. While preventing the user from dismissing the modal is possible,
  94. the modal could still be dismissed programmatically by calling `Navigation.dismissModal()`
  95. If the modal has a dismiss button, of course you'll need to handle it your self and avoid calling `Navigation.dismissModal()`
  96. when the button is pressed.
  97. ### Android
  98. On Android, modals can be dismissed with the hardware back button. You can handle the back press your self by
  99. adding a [BackHandler](https://facebook.github.io/react-native/docs/backhandler)
  100. ### iOS
  101. While iOS devices don't have a hardware back button, PageSheet modals can be dismissed by swipe gesture
  102. from the top of the screen. To disable it, set [swipeToDismiss]() option to false.
  103. ## Presentation Style
  104. The [presentation style](options-root#modalpresentationstyle) determines the look and feel of a screen displayed as modal.