react-native-navigation的迁移库

api-events.mdx 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. ---
  2. id: events
  3. title: Events
  4. sidebar_label: Events
  5. ---
  6. ## onAppLaunched
  7. Called once the app is launched. Used to set the initial layout of the Application - after that the app is ready for user interaction.
  8. ```js
  9. const appLaunchedListener = Navigation.events().registerAppLaunchedListener(
  10. () => {}
  11. );
  12. ```
  13. RNN automatically unsubscribes components when they unmount, therefore unsubscribing isn't actually mandatory if you subscribed in `componentDidMount`.
  14. But you can use the following method to unsubscribe manually:
  15. ```js
  16. appLaunchedListener.remove();
  17. ```
  18. ## componentDidAppear
  19. Called each time this component appears on the screen (attached to the view hierarchy).
  20. ```js
  21. class MyComponent extends Component {
  22. componentDidMount() {
  23. this.navigationEventListener = Navigation.events().bindComponent(this);
  24. }
  25. componentWillUnmount() {
  26. // Not mandatory
  27. if (this.navigationEventListener) {
  28. this.navigationEventListener.remove();
  29. }
  30. }
  31. componentDidAppear() {}
  32. }
  33. ```
  34. This event can be observed globally as well:
  35. ```js
  36. // Subscribe
  37. const screenEventListener = Navigation.events().registerComponentDidAppearListener(({ componentId, componentName, passProps }) => {
  38. });
  39. ...
  40. // Unsubscribe
  41. screenEventListener.remove();
  42. ```
  43. | Parameter | Description |
  44. | :---------------: | :---------------------------------------------------------------------------------------- |
  45. | **componentId** | Id of the appearing component |
  46. | **componentName** | Registered name used when registering the component with `Navigation.registerComponent()` |
  47. | **passProps** | props passed to the component |
  48. ## componentDidDisappear
  49. Called each time this component disappears from the screen (detached from the view hierarchy).
  50. ```js
  51. class MyComponent extends Component {
  52. componentDidMount() {
  53. this.navigationEventListener = Navigation.events().bindComponent(this);
  54. }
  55. componentWillUnmount() {
  56. // Not mandatory
  57. if (this.navigationEventListener) {
  58. this.navigationEventListener.remove();
  59. }
  60. }
  61. componentDidDisappear() {}
  62. }
  63. ```
  64. This event can be observed globally as well:
  65. ```js
  66. // Subscribe
  67. const screenEventListener = Navigation.events().registerComponentDidDisappearListener(({ componentId, componentName }) => {
  68. });
  69. ...
  70. // Unsubscribe
  71. screenEventListener.remove();
  72. ```
  73. | Parameter | Description |
  74. | :---------------: | :---------------------------------------------------------------------------------------- |
  75. | **componentId** | Id of the disappearing component |
  76. | **componentName** | Registered name used when registering the component with `Navigation.registerComponent()` |
  77. ## registerCommandListener
  78. The `commandListener` is called whenever a _Navigation command_ (i.e push, pop, showModal etc) is invoked.
  79. ```js
  80. // Subscribe
  81. const commandListener = Navigation.events().registerCommandListener((name, params) => {
  82. });
  83. ...
  84. // Unsubscribe
  85. commandListener.remove();
  86. ```
  87. | Parameter | Description |
  88. | :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  89. | **name** | The name of the command that was invoked. For example `push` |
  90. | **params** | `commandId`: Each command is assigned a unique Id<br />`componentId`: Optional, the componentId passed to the command<br />`layout`: Optional, if the command invoked created a screen. Slim representation of the component and its options |
  91. ## registerCommandCompletedListener
  92. Invoked when a command finishes executing in native. If the command contains animations, for example pushed screen animation, the listener is invoked after the animation ends.
  93. ```js
  94. // Subscribe
  95. const commandCompletedListener = Navigation.events().registerCommandCompletedListener(({ commandId, completionTime, params }) => {
  96. });
  97. ...
  98. // Unsubscribe
  99. commandCompletedListener.remove();
  100. ```
  101. | Parameter | Description |
  102. | :----------------: | :----------------------------------------------------------------- |
  103. | **commandId** | Id of the completed command |
  104. | **completionTime** | Timestamp when the command, and consecutive animations, completed. |
  105. ## registerModalDismissedListener
  106. Invoked when a modal is dismissed.
  107. ```js
  108. // Subscribe
  109. const modalDismissedListener = Navigation.events().registerModalDismissedListener(({ componentId, modalsDismissed }) => {
  110. });
  111. ...
  112. // Unsubscribe
  113. modalDismissedListener.remove();
  114. ```
  115. ## registerModalAttemptedToDismissListener(iOS 13+ only)
  116. Invoked only on iOS pageSheet modal when `swipeToDismiss` flag is set to true and modal was swiped down to dismiss.
  117. ```js
  118. // Subscribe
  119. const modalAttemptedToDismissListener = Navigation.events().registerModalAttemptedToDismissListener(({ componentId }) => {
  120. });
  121. ...
  122. // Unsubscribe
  123. modalDismissedListener.remove();
  124. ```
  125. | Parameter | Description |
  126. | :-------------: | :------------------------------- |
  127. | **componentId** | Id of the modal a user is attempting to dismiss |
  128. ## registerScreenPoppedListener
  129. Invoked when the screen is popped.
  130. ```js
  131. // Subscribe
  132. const screenPoppedListener = Navigation.events().registerScreenPoppedListener(({ componentId }) => {
  133. });
  134. ...
  135. // Unsubscribe
  136. screenPoppedListener.remove();
  137. ```
  138. | Parameter | Description |
  139. | :-----------------: | :----------------------------------- |
  140. | **componentId** | Id of the modal |
  141. | **modalsDismissed** | Number of modals that were dismissed |
  142. ## registerBottomTabSelectedListener
  143. Invoked when BottomTab is selected by a user.
  144. ```js
  145. // Subscribe
  146. const bottomTabEventListener = Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
  147. });
  148. ...
  149. // Unsubscribe
  150. bottomTabEventListener.remove();
  151. ```
  152. ## registerBottomTabLongPressedListener
  153. Invoked when BottomTab is long pressed by a user.
  154. ```js
  155. // Subscribe
  156. const bottomTabEventListener = Navigation.events().registerBottomTabLongPressedListener(({ selectedTabIndex }) => {
  157. });
  158. ...
  159. // Unsubscribe
  160. bottomTabEventListener.remove();
  161. ```
  162. | Parameter | Description |
  163. | :--------------------: | :------------------------------------|
  164. | **selectedTabIndex** | Index of the newly selected tab |
  165. | **unselectedTabIndex** | Index of the previously selected tab |
  166. ## navigationButtonPressed event
  167. This event is emitted whenever a TopBar button is pressed by a user.
  168. ```js
  169. class MyComponent extends Component {
  170. componentDidMount() {
  171. this.navigationEventListener = Navigation.events().bindComponent(this);
  172. }
  173. componentWillUnmount() {
  174. // Unregistering listeners bound to components isn't mandatory since RNN handles the unregistration for you
  175. if (this.navigationEventListener) {
  176. this.navigationEventListener.remove();
  177. }
  178. }
  179. navigationButtonPressed({ buttonId }) {}
  180. }
  181. ```
  182. This event can be observed globally as well:
  183. ```js
  184. // Subscribe
  185. const navigationButtonEventListener = Navigation.events().registerNavigationButtonPressedListener(({ buttonId }) => {
  186. });
  187. ...
  188. // Unsubscribe
  189. navigationButtonEventListener.remove();
  190. ```
  191. | Parameter | Description |
  192. | :----------: | :------------------------------------- |
  193. | **buttonId** | `buttonId`: `id` of the pressed button |
  194. ## searchBarUpdated (iOS 11+ only)
  195. Called whenever the SearchBar of NavigationBar is updated.
  196. ```js
  197. class MyComponent extends Component {
  198. componentDidMount() {
  199. this.navigationEventListener = Navigation.events().bindComponent(this);
  200. }
  201. componentWillUnmount() {
  202. // Not mandatory
  203. if (this.navigationEventListener) {
  204. this.navigationEventListener.remove();
  205. }
  206. }
  207. searchBarUpdated({ text, isFocused }) {}
  208. }
  209. ```
  210. ## searchBarCancelPressed (iOS 11+ only)
  211. Called when the cancel button of the SearchBar from NavigationBar is pressed.
  212. ```js
  213. class MyComponent extends Component {
  214. componentDidMount() {
  215. this.navigationEventListener = Navigation.events().bindComponent(this);
  216. }
  217. componentWillUnmount() {
  218. // Not mandatory
  219. if (this.navigationEventListener) {
  220. this.navigationEventListener.remove();
  221. }
  222. }
  223. searchBarCancelPressed() {}
  224. }
  225. ```
  226. ## previewCompleted (iOS 11.4+ only)
  227. Called when preview peek is completed.
  228. ```js
  229. class MyComponent extends Component {
  230. componentDidMount() {
  231. this.navigationEventListener = Navigation.events().bindComponent(this);
  232. }
  233. componentWillUnmount() {
  234. // Not mandatory
  235. if (this.navigationEventListener) {
  236. this.navigationEventListener.remove();
  237. }
  238. }
  239. previewCompleted({ previewComponentId }) {}
  240. }
  241. ```