Bladeren bron

Update README.md

Tal Kol 8 jaren geleden
bovenliggende
commit
a778afc246
1 gewijzigde bestanden met toevoegingen van 62 en 6 verwijderingen
  1. 62
    6
      README.md

+ 62
- 6
README.md Bestand weergeven

@@ -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.