|
@@ -11,6 +11,7 @@ App-wide support for 100% native navigation with an easy cross-platform interfac
|
11
|
11
|
* [Screen API](#screen-api)
|
12
|
12
|
* [Styling the navigator](#styling-the-navigator)
|
13
|
13
|
* [Adding buttons to the navigator](#adding-buttons-to-the-navigator)
|
|
14
|
+* [Deep links](#deep-links)
|
14
|
15
|
* [Release Notes](RELEASES.md)
|
15
|
16
|
* [License](#license)
|
16
|
17
|
|
|
@@ -277,6 +278,16 @@ Dismiss the current modal.
|
277
|
278
|
this.props.navigator.dismissModal({
|
278
|
279
|
animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
|
279
|
280
|
});
|
|
281
|
+```
|
|
282
|
+
|
|
283
|
+ * **handleDeepLink(params = {})**
|
|
284
|
+
|
|
285
|
+Trigger a deep link within the app. See [deep links](#deep-links) for more details about how screens can listen for deep link events.
|
|
286
|
+
|
|
287
|
+```js
|
|
288
|
+this.props.navigator.handleDeepLink({
|
|
289
|
+ link: "chats/2349823023" // the link string (required)
|
|
290
|
+});
|
280
|
291
|
```
|
281
|
292
|
|
282
|
293
|
* **setOnNavigatorEvent(callback)**
|
|
@@ -317,7 +328,8 @@ Toggle the side menu drawer assuming you have one in your app.
|
317
|
328
|
```js
|
318
|
329
|
this.props.navigator.toggleDrawer({
|
319
|
330
|
side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
|
320
|
|
- animated: true // does the toggle have transition animation or does it happen immediately (optional)
|
|
331
|
+ animated: true, // does the toggle have transition animation or does it happen immediately (optional)
|
|
332
|
+ to: 'open' // optional, 'open' = open the drawer, 'closed' = close it, missing = the opposite of current state
|
321
|
333
|
});
|
322
|
334
|
```
|
323
|
335
|
|
|
@@ -393,11 +405,13 @@ class FirstTabScreen extends Component {
|
393
|
405
|
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
|
394
|
406
|
}
|
395
|
407
|
onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
|
396
|
|
- if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
|
397
|
|
- AlertIOS.alert('NavBar', 'Edit button pressed');
|
398
|
|
- }
|
399
|
|
- if (event.id == 'add') {
|
400
|
|
- AlertIOS.alert('NavBar', 'Add button pressed');
|
|
408
|
+ if (event.type == 'NavBarButtonPress') { // this is the event type for button presses
|
|
409
|
+ if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
|
|
410
|
+ AlertIOS.alert('NavBar', 'Edit button pressed');
|
|
411
|
+ }
|
|
412
|
+ if (event.id == 'add') {
|
|
413
|
+ AlertIOS.alert('NavBar', 'Add button pressed');
|
|
414
|
+ }
|
401
|
415
|
}
|
402
|
416
|
}
|
403
|
417
|
render() {
|
|
@@ -421,6 +435,48 @@ class FirstTabScreen extends Component {
|
421
|
435
|
}
|
422
|
436
|
```
|
423
|
437
|
|
|
438
|
+## Deep links
|
|
439
|
+
|
|
440
|
+Deep links are strings which represent internal app paths/routes. They commonly appear on push notification payloads to control which section of the app should be displayed when the notification is clicked. For example, in a chat app, clicking on the notification should open the relevant conversation on the "chats" tab.
|
|
441
|
+
|
|
442
|
+Another use-case for deep links is when one screen wants to control what happens in another sibling screen. Normally, a screen can only push/pop from its own stack, it cannot access the navigation stack of a sibling tab for example. Returning to our chat app example, assume that by clicking on a contact in the "contacts" tab we want to open the relevant conversation in the "chats" tab. Since the tabs are siblings, you can achieve this behavior by triggering a deep link:
|
|
443
|
+
|
|
444
|
+```js
|
|
445
|
+onContactSelected(contactID) {
|
|
446
|
+ this.props.navigator.handleDeepLink({
|
|
447
|
+ link: 'chats/' + contactID
|
|
448
|
+ });
|
|
449
|
+}
|
|
450
|
+```
|
|
451
|
+
|
|
452
|
+> Tip: Deep links are also the recommended way to handle side drawer actions. Since the side drawer screen is a sibling to the rest of the app, it can control the other screens by triggering deep links.
|
|
453
|
+
|
|
454
|
+#### Handling deep links
|
|
455
|
+
|
|
456
|
+Every deep link event is broadcasted to all screens. A screen can listen to these events by defining a handler using `setOnNavigatorEvent` (much like listening for button events). Using this handler, the screen can filter links directed to it by parsing the link string and act upon any relevant links found.
|
|
457
|
+
|
|
458
|
+```js
|
|
459
|
+export default class SecondTabScreen extends Component {
|
|
460
|
+ constructor(props) {
|
|
461
|
+ super(props);
|
|
462
|
+ // if you want to listen on navigator events, set this up
|
|
463
|
+ this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
|
|
464
|
+ }
|
|
465
|
+ onNavigatorEvent(event) {
|
|
466
|
+ // handle a deep link
|
|
467
|
+ if (event.type == 'DeepLink') {
|
|
468
|
+ const parts = event.link.split('/');
|
|
469
|
+ if (parts[0] == 'tab2') {
|
|
470
|
+ // handle the link somehow, usually run a this.props.navigator command
|
|
471
|
+ }
|
|
472
|
+ }
|
|
473
|
+ }
|
|
474
|
+```
|
|
475
|
+
|
|
476
|
+#### Deep link string format
|
|
477
|
+
|
|
478
|
+There is no specification for the format of deep links. Since you're implementing the parsing logic in your handlers, you can use any format you wish.
|
|
479
|
+
|
424
|
480
|
## License
|
425
|
481
|
|
426
|
482
|
The MIT License.
|