Browse Source

Update README.md

Tal Kol 8 years ago
parent
commit
a778afc246
1 changed files with 62 additions and 6 deletions
  1. 62
    6
      README.md

+ 62
- 6
README.md View File

11
 * [Screen API](#screen-api)
11
 * [Screen API](#screen-api)
12
 * [Styling the navigator](#styling-the-navigator)
12
 * [Styling the navigator](#styling-the-navigator)
13
 * [Adding buttons to the navigator](#adding-buttons-to-the-navigator)
13
 * [Adding buttons to the navigator](#adding-buttons-to-the-navigator)
14
+* [Deep links](#deep-links)
14
 * [Release Notes](RELEASES.md)
15
 * [Release Notes](RELEASES.md)
15
 * [License](#license)
16
 * [License](#license)
16
 
17
 
277
 this.props.navigator.dismissModal({
278
 this.props.navigator.dismissModal({
278
   animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
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
  * **setOnNavigatorEvent(callback)**
293
  * **setOnNavigatorEvent(callback)**
317
 ```js
328
 ```js
318
 this.props.navigator.toggleDrawer({
329
 this.props.navigator.toggleDrawer({
319
   side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
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
     this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
405
     this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
394
   }
406
   }
395
   onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
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
   render() {
417
   render() {
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
 ## License
480
 ## License
425
 
481
 
426
 The MIT License.
482
 The MIT License.