Browse Source

Update README.md

Tal Kol 8 years ago
parent
commit
4bce6c12d7
1 changed files with 63 additions and 0 deletions
  1. 63
    0
      README.md

+ 63
- 0
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
+* [Styling the tab bar](#styling-the-tab-bar)
14
 * [Deep links](#deep-links)
15
 * [Deep links](#deep-links)
15
 * [Release Notes](RELEASES.md)
16
 * [Release Notes](RELEASES.md)
16
 * [License](#license)
17
 * [License](#license)
138
       title: 'Screen Two'
139
       title: 'Screen Two'
139
     }
140
     }
140
   ],
141
   ],
142
+  tabsStyle: { // optional, add this if you want to style the tab bar beyond the defaults
143
+    tabBarButtonColor: '#ffff00', // optional, change the color of the tab icons and text (also unselected)
144
+    tabBarSelectedButtonColor: '#ff9900', // optional, change the color of the selected tab icon and text (only selected)
145
+    tabBarBackgroundColor: '#551A8B' // optional, change the background color of the tab bar
146
+  },
141
   drawer: { // optional, add this if you want a side menu drawer in your app
147
   drawer: { // optional, add this if you want a side menu drawer in your app
142
     left: { // optional, define if you want a drawer from the left
148
     left: { // optional, define if you want a drawer from the left
143
       screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
149
       screen: 'example.FirstSideMenu' // unique ID registered with Navigation.registerScreen
331
   animated: true, // does the toggle have transition animation or does it happen immediately (optional)
337
   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
338
   to: 'open' // optional, 'open' = open the drawer, 'closed' = close it, missing = the opposite of current state
333
 });
339
 });
340
+```
341
+
342
+ * **toggleTabs(params = {})**
343
+
344
+Toggle whether the tabs are displayed or not (only in tab-based apps).
345
+
346
+```js
347
+this.props.navigator.toggleDrawer({
348
+  to: 'hidden', // required, 'hidden' = hide tab bar, 'shown' = show tab bar
349
+  animated: true // does the toggle have transition animation or does it happen immediately (optional)
350
+});
351
+```
352
+
353
+ * **setTabBadge(params = {})**
354
+
355
+Set the badge on a tab (any string or numeric value).
356
+
357
+```js
358
+this.props.navigator.setTabBadge({
359
+  tabIndex: 0, // (optional) if missing, the badge will be added to this screen's tab
360
+  badge: 17 // badge value, null to remove badge
361
+});
362
+```
363
+
364
+ * **switchToTab(params = {})**
365
+
366
+Switch to a tab (sets it as the currently selected tab).
367
+
368
+```js
369
+this.props.navigator.switchToTab({
370
+  tabIndex: 0 // (optional) if missing, this screen's tab will become selected
371
+});
334
 ```
372
 ```
335
 
373
 
336
 ## Styling the navigator
374
 ## Styling the navigator
435
 }
473
 }
436
 ```
474
 ```
437
 
475
 
476
+## Styling the tab bar
477
+
478
+You can style the tab bar appearance by passing a `tabsStyle` object when the app is originally created (on `startTabBasedApp`).
479
+
480
+```js
481
+Navigation.startTabBasedApp({
482
+  tabs: [ ... ],
483
+  tabsStyle: { // optional, add this if you want to style the tab bar beyond the defaults
484
+    tabBarButtonColor: '#ff0000'
485
+  }
486
+});
487
+```
488
+
489
+#### Style object format
490
+
491
+```js
492
+{
493
+  tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
494
+  tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
495
+  tabBarBackgroundColor: '#551A8B' // change the background color of the tab bar
496
+}
497
+```
498
+
499
+All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-tab-bar). There's also an example project there showcasing all the different styles.
500
+
438
 ## Deep links
501
 ## Deep links
439
 
502
 
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.
503
 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.