react-native-navigation的迁移库

api-stack.mdx 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. ---
  2. id: stack
  3. title: Stack
  4. sidebar_label: Stack
  5. ---
  6. import Tabs from '@theme/Tabs';
  7. import TabItem from '@theme/TabItem';
  8. ## `push()`
  9. Push a screen into the stack and update the display according to the screen options.
  10. #### Parameters
  11. | Name | Required | Type | Description |
  12. | ----------- | -------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  13. | componentId | Yes | string | The componentId of a screen pushed into the stack, or the id of the stack. |
  14. | layout | No | Layout | The layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well. |
  15. #### Example
  16. <Tabs
  17. defaultValue='component'
  18. values={[
  19. { label: 'Component', value: 'component', },
  20. { label: 'Update options on push', value: 'push', },
  21. { label: 'Push other layouts', value: 'otherLayout', },
  22. ]
  23. }>
  24. <TabItem value='component'>
  25. The most common use case - push a single React component.
  26. ```js
  27. Navigation.push(this.props.componentId, {
  28. component: {
  29. name: 'example.PushedScreen'
  30. }
  31. });
  32. ```
  33. </TabItem>
  34. <TabItem value='push'>
  35. Options are applied when the screen becomes visible.
  36. ```js
  37. Navigation.push(this.props.componentId, {
  38. component: {
  39. name: 'example.PushedScreen',
  40. options: {
  41. topBar: {
  42. title: {
  43. text: 'Pushed screen title'
  44. }
  45. }
  46. }
  47. }
  48. });
  49. ```
  50. </TabItem>
  51. <TabItem value='otherLayout'>
  52. Any layout type can be pushed. In this example we push a SideMenu layout.
  53. ```js
  54. Navigation.push(this.props.componentId, {
  55. sideMenu: {
  56. left: {
  57. component: {
  58. name: 'drawerScreen'
  59. }
  60. },
  61. center: {
  62. component: {
  63. name: 'centerScreen'
  64. }
  65. }
  66. }
  67. });
  68. ```
  69. </TabItem>
  70. </Tabs>
  71. ## `pop()`
  72. Pop the top screen from the stack.
  73. #### Parameters
  74. | Name | Required | Type | Description |
  75. | ------------ | -------- | ----------------------------------- | --------------------------------------------------------------------- |
  76. | componentId | Yes | string | The componentId of a screen pushed into the stack, or the stack id. |
  77. | mergeOptions | No | [Options](options-root.mdx) | Options to be merged before popping the screen (optional). |
  78. ```js
  79. Navigation.pop(this.props.componentId);
  80. ```
  81. ## `popToRoot()`
  82. Pop all screens pushed into the stack.
  83. #### Parameters
  84. | Name | Required | Type | Description |
  85. | ------------ | -------- | ------- | --------------------------------------------------------------------- |
  86. | componentId | Yes | string | The componentId of a screen pushed into the stack, or the stack id. |
  87. | mergeOptions | No | [Options](options-root.mdx) | Options to be merged before popping the screen (optional). |
  88. ```js
  89. Navigation.popToRoot(this.props.componentId);
  90. ```
  91. ## `popTo()`
  92. Pop the stack to a given component.
  93. #### Parameters
  94. | Name | Required | Type | Description |
  95. | ------------ | -------- | --------------------- | -------------------------------------------------------- |
  96. | componentId | Yes | string | The destination componentId |
  97. | mergeOptions | No | [Options](options-root.mdx) | Options to be merged before popping the screen (optional). |
  98. ```js
  99. Navigation.popTo(componentId);
  100. ```
  101. ## `setStackRoot()`
  102. Reset the stack to the given layout (accepts multiple children).
  103. #### Parameters
  104. | Name | Required | Type | Description |
  105. | ----------- | -------- | -------------------------------------------------------- | --------------------------------------------------------------------- |
  106. | componentId | Yes | string | The componentId of a screen pushed into the stack, or the stack id. |
  107. | layout | Yes | [layout](layout-layout.mdx) or [layout](layout-layout.mdx)[] | A single Component or array of components. |
  108. #### Example
  109. <Tabs
  110. defaultValue='single'
  111. values={[
  112. { label: 'Single child', value: 'single' },
  113. { label: 'Multiple children', value: 'multiple' }
  114. ]
  115. }>
  116. <TabItem value='single'>
  117. ```js
  118. Navigation.setStackRoot(this.props.componentId, {
  119. component: {
  120. name: 'example.NewRootScreen'
  121. }
  122. });
  123. ```
  124. </TabItem>
  125. <TabItem value='multiple'>
  126. In the example below we reset the stack with two components. The first one will be the root component and the second (`PushedScreen`) will be displayed. Pressing the back button (either hardware or software) will pop it, revealing the root component - `NewRootScreen`.
  127. ```js
  128. Navigation.setStackRoot(this.props.componentId, [
  129. {
  130. component: {
  131. name: 'NewRootScreen',
  132. }
  133. },
  134. {
  135. component: {
  136. name: 'PushedScreen',
  137. }
  138. }
  139. ]);
  140. ```
  141. </TabItem>
  142. </Tabs>