|
5 | 5 |
|
6 | 6 | React view manager similar to [UINavigationController][ios-controller] |
7 | 7 |
|
8 | | -## Instalation |
| 8 | +## Installation |
9 | 9 |
|
10 | 10 | ```bash |
11 | 11 | npm install react-navigation-controller |
@@ -180,6 +180,46 @@ If set to `true`, the navigationController will save the state |
180 | 180 | of each view that gets pushed onto the stack. When `popView()` is called, |
181 | 181 | the navigationController will rehydrate the state of the view before it is shown. |
182 | 182 |
|
| 183 | +## Lifecycle Events |
| 184 | + |
| 185 | +Similar to the React component lifecycle, the navigationController will |
| 186 | +call lifecycle events on the component at certain stages. |
| 187 | + |
| 188 | +Lifecycle events can trigger actions when views transition in or out, |
| 189 | +instead of mounted or unmounted: |
| 190 | + |
| 191 | +``` |
| 192 | +class HelloView extends React.Component { |
| 193 | + navigationControllerDidShowView() { |
| 194 | + // Do something when the show transition is finished, |
| 195 | + // like fade in an element. |
| 196 | + } |
| 197 | + navigationControllerWillHideView() { |
| 198 | + // Do something when the hide transition will start, |
| 199 | + // like fade out an element. |
| 200 | + } |
| 201 | + render() { |
| 202 | + return <div>Hello, {this.props.name}!</div>; |
| 203 | + } |
| 204 | +} |
| 205 | +``` |
| 206 | + |
| 207 | +### `view.navigationControllerWillHideView()` |
| 208 | + |
| 209 | +Invoked immediately before the previous view will be hidden. |
| 210 | + |
| 211 | +### `view.navigationControllerWillShowView()` |
| 212 | + |
| 213 | +Invoked immediately before the next view will be shown. |
| 214 | + |
| 215 | +### `view.navigationControllerDidHideView()` |
| 216 | + |
| 217 | +Invoked immediately after the previous view has been hidden. |
| 218 | + |
| 219 | +### `view.navigationControllerDidShowView()` |
| 220 | + |
| 221 | +Invoked immediately after the next view has been shown. |
| 222 | + |
183 | 223 | ## Styling |
184 | 224 |
|
185 | 225 | No default styles are provided, but classes are added for custom styling: |
|
0 commit comments