Sfoglia il codice sorgente

Update docs to reflect changes introduced by #3497

Guy Carmeli 6 anni fa
parent
commit
52c500c41e

+ 57
- 26
docs/docs/events.md Vedi File

@@ -11,10 +11,15 @@ Navigation.events().registerAppLaunchedListener(() => {
11 11
 ```
12 12
 
13 13
 ## componentDidAppear
14
-Called each time this component appears on screen (attached to the view heirarchy)
14
+Called each time this component appears on screen (attached to the view hierarchy)
15 15
 
16 16
 ```js
17 17
 class MyComponent extends Component {
18
+  constructor(props) {
19
+    super(props);
20
+    Navigation.events().bindComponent(this);
21
+  }
22
+
18 23
   componentDidAppear() {
19 24
 
20 25
   }
@@ -24,7 +29,7 @@ class MyComponent extends Component {
24 29
 This event can be observed globally as well:
25 30
 
26 31
 ```js
27
-Navigation.events().registerComponentDidAppearListener((componentId, componentName) => {
32
+Navigation.events().registerComponentDidAppearListener(({ componentId, componentName }) => {
28 33
 
29 34
 });
30 35
 ```
@@ -38,7 +43,12 @@ Called each time this component disappears from screen (detached from the view h
38 43
 
39 44
 ```js
40 45
 class MyComponent extends Component {
41
-  componentDidAppear() {
46
+  constructor(props) {
47
+    super(props);
48
+    Navigation.events().bindComponent(this);
49
+  }
50
+
51
+  componentDidDisappear() {
42 52
 
43 53
   }
44 54
 }
@@ -47,7 +57,7 @@ class MyComponent extends Component {
47 57
 This event can be observed globally as well:
48 58
 
49 59
 ```js
50
-Navigation.events().registerComponentDidDisappearListener((componentId, componentName) => {
60
+Navigation.events().registerComponentDidDisappearListener(({ componentId, componentName }) => {
51 61
 
52 62
 });
53 63
 ```
@@ -60,7 +70,7 @@ Navigation.events().registerComponentDidDisappearListener((componentId, componen
60 70
 The `commandListener` is called whenever a *Navigation command* (i.e push, pop, showModal etc) is invoked.
61 71
 
62 72
 ```js
63
-Navigation.events().registerCommandListener((name, params) => {
73
+Navigation.events().registerCommandListener(({ name, params }) => {
64 74
 
65 75
 });
66 76
 ```
@@ -73,7 +83,7 @@ Navigation.events().registerCommandListener((name, params) => {
73 83
 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.
74 84
 
75 85
 ```js
76
-Navigation.events().registerCommandCompletedListener((commandId, completionTime, params) => {
86
+Navigation.events().registerCommandCompletedListener(({ commandId, completionTime, params }) => {
77 87
 
78 88
 });
79 89
 ```
@@ -83,43 +93,59 @@ Navigation.events().registerCommandCompletedListener((commandId, completionTime,
83 93
 |**commandId** | Id of the completed command|
84 94
 |**completionTime**|Timestamp when the command, and consecutive animations, completed.|
85 95
 
86
-## registerNativeEventListener
87
-
88
-The nativeEvent listener is used to track various events that originate in the native aspect of the app, primarily UI events.
96
+## registerBottomTabSelectedListener
97
+Invoked when a BottomTab is selected by the user.
89 98
 
90
-### bottomTabSelected event
91
-This event is emitted whenever a BottomTab is selected by the user
92
-
93
-|Parameter|Description|
94
-|:-:|:--|
95
-|**name**|`bottomTabSelected`|
96
-|**params**|`unselectedTabIndex`: The index of the previously selected tab<br>`selectedTabIndex`: The index of the newly selected tab|
99
+```js
100
+Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
97 101
 
98
-### buttonPressed event
99
-This event is emitted whenever a TopBar button is pressed by the user
102
+});
103
+```
100 104
 
101
-|Parameter|Description|
102
-|:-:|:--|
103
-|**name**|`buttonPressed`|
104
-|**params**|`componentId`: `componentId` of the layout element the pressed button is bound to<br>`buttonId`: `id` of the pressed button|
105
+|       Parameter         | Description |
106
+|:--------------------:|:-----|
107
+|**selectedTabIndex** | The index of the newly selected tab|
108
+|**unselectedTabIndex**|The index of the previously selected tab|
105 109
 
106
-## navigationButtonPressed
107
-Called when a TopBar button is pressed.
110
+## navigationButtonPressed event
111
+This event is emitted whenever a TopBar button is pressed by the user.
108 112
 
109 113
 ```js
110 114
 class MyComponent extends Component {
111
-  navigationButtonPressed(buttonId) {
115
+  constructor(props) {
116
+    super(props);
117
+    Navigation.events().bindComponent(this);
118
+  }
119
+  
120
+  navigationButtonPressed({ buttonId }) {
112 121
 
113 122
   }
114 123
 }
115 124
 ```
116 125
 
126
+This event can be observed globally as well:
127
+
128
+```js
129
+Navigation.events().registerNavigationButtonPressedListener(({ buttonId }) => {
130
+
131
+});
132
+```
133
+
134
+|Parameter|Description|
135
+|:-:|:--|
136
+|**buttonId**|`buttonId`: `id` of the pressed button|
137
+
117 138
 ## onSearchBarUpdated (iOS 11+ only)
118 139
 Called when a SearchBar from NavigationBar gets updated.
119 140
 
120 141
 ```js
121 142
 class MyComponent extends Component {
122
-  onSearchBarUpdated(query, isFocused) {
143
+  constructor(props) {
144
+    super(props);
145
+    Navigation.events().bindComponent(this);
146
+  }
147
+
148
+  onSearchBarUpdated({ query, isFocused }) {
123 149
 
124 150
   }
125 151
 }
@@ -130,6 +156,11 @@ Called when the cancel button on the SearchBar from NavigationBar gets pressed.
130 156
 
131 157
 ```js
132 158
 class MyComponent extends Component {
159
+  constructor(props) {
160
+    super(props);
161
+    Navigation.events().bindComponent(this);
162
+  }
163
+
133 164
   onSearchBarCancelPressed() {
134 165
 
135 166
   }

+ 26
- 0
docs/docs/topBar-buttons.md Vedi File

@@ -61,6 +61,32 @@ Navigation.push(this.props.componentId, {
61 61
 }
62 62
 ```
63 63
 
64
+# Handling button press events
65
+
66
+```js
67
+class MyScreen extends Component {
68
+  static get options() {
69
+    return {
70
+      topBar: {
71
+        rightButtons: {
72
+          id: 'buttonOne',
73
+          icon: require('icon.png')
74
+        }
75
+      }
76
+    };
77
+  }
78
+
79
+  constructor(props) {
80
+    super(props);
81
+    Navigation.events().bindComponent(this); // bindComponent(this) has to be called if you want the component to handle navigation events, such as navigationButtonPressed
82
+  }
83
+
84
+  navigationButtonPressed({ buttonId }) {
85
+
86
+  }
87
+}
88
+```
89
+
64 90
 # Modifying buttons at runtime
65 91
 
66 92
 As buttons are part of a screen's options, they can be modified like any other styling option using the `mergeOptions` command.

+ 9
- 2
playground/src/screens/StaticLifecycleOverlay.js Vedi File

@@ -24,11 +24,16 @@ class StaticLifecycleOverlay extends Component {
24 24
         events: [...this.state.events, { ...event }]
25 25
       });
26 26
     }));
27
-    this.listeners.push(Navigation.events().registerCommandCompletedListener(({commandId}) => {
27
+    this.listeners.push(Navigation.events().registerCommandCompletedListener(({ commandId }) => {
28 28
       this.setState({
29 29
         events: [...this.state.events, { event: 'commandCompleted', commandId }]
30 30
       });
31 31
     }));
32
+    this.listeners.push(Navigation.events().registerNavigationButtonPressedListener(({ componentId, buttonId }) => {
33
+      this.setState({
34
+        events: [...this.state.events, { event: 'navigationButtonPressed', buttonId, componentId }]
35
+      });
36
+    }));
32 37
   }
33 38
 
34 39
   componentWillUnmount() {
@@ -40,8 +45,10 @@ class StaticLifecycleOverlay extends Component {
40 45
   renderEvent(event) {
41 46
     if (event.commandId) {
42 47
       return <Text style={styles.h2}>{`${event.commandId}`}</Text>;
43
-    } else {
48
+    } else if (event.componentName) {
44 49
       return <Text style={styles.h2}>{`${event.event} | ${event.componentName}`}</Text>;
50
+    } else {
51
+      return <Text style={styles.h2}>{`${event.event} | ${event.buttonId}`}</Text>;
45 52
     }
46 53
   }
47 54