Bladeren bron

added tab features: switch tabs, toggle tabs, set badge, tab styling

talkol 9 jaren geleden
bovenliggende
commit
fa18e55fb1

+ 5
- 0
example/src/app.js Bestand weergeven

35
       }
35
       }
36
     }
36
     }
37
   ],
37
   ],
38
+  // tabsStyle: {
39
+  //   tabBarButtonColor: '#ffff00',
40
+  //   tabBarSelectedButtonColor: '#ff9900',
41
+  //   tabBarBackgroundColor: '#551A8B'
42
+  // },
38
   drawer: {
43
   drawer: {
39
     left: {
44
     left: {
40
       screen: 'example.SideMenu'
45
       screen: 'example.SideMenu'

+ 3
- 0
example/src/screens/FirstTabScreen.js Bestand weergeven

25
       }
25
       }
26
     ]
26
     ]
27
   };
27
   };
28
+  static navigatorStyle = {
29
+    drawUnderTabBar: true
30
+  };
28
   constructor(props) {
31
   constructor(props) {
29
     super(props);
32
     super(props);
30
     // if you want to listen on navigator events, set this up
33
     // if you want to listen on navigator events, set this up

+ 3
- 0
example/src/screens/PushedScreen.js Bestand weergeven

8
 } from 'react-native';
8
 } from 'react-native';
9
 
9
 
10
 export default class PushedScreen extends Component {
10
 export default class PushedScreen extends Component {
11
+  static navigatorStyle = {
12
+    drawUnderTabBar: true
13
+  };
11
   constructor(props) {
14
   constructor(props) {
12
     super(props);
15
     super(props);
13
   }
16
   }

+ 32
- 0
example/src/screens/SecondTabScreen.js Bestand weergeven

9
 } from 'react-native';
9
 } from 'react-native';
10
 
10
 
11
 export default class SecondTabScreen extends Component {
11
 export default class SecondTabScreen extends Component {
12
+  static navigatorStyle = {
13
+    drawUnderTabBar: true
14
+  };
12
   constructor(props) {
15
   constructor(props) {
13
     super(props);
16
     super(props);
14
     this.buttonsCounter = 0;
17
     this.buttonsCounter = 0;
27
           <Text style={styles.button}>Change Title</Text>
30
           <Text style={styles.button}>Change Title</Text>
28
         </TouchableOpacity>
31
         </TouchableOpacity>
29
 
32
 
33
+        <TouchableOpacity onPress={ this.onSwitchTabPress.bind(this) }>
34
+          <Text style={styles.button}>Switch To Tab#1</Text>
35
+        </TouchableOpacity>
36
+
37
+        <TouchableOpacity onPress={ this.onSetTabBadgePress.bind(this) }>
38
+          <Text style={styles.button}>Set Tab Badge</Text>
39
+        </TouchableOpacity>
40
+
41
+        <TouchableOpacity onPress={ this.onToggleTabsPress.bind(this) }>
42
+          <Text style={styles.button}>Toggle Tabs</Text>
43
+        </TouchableOpacity>
44
+
30
       </View>
45
       </View>
31
     );
46
     );
32
   }
47
   }
63
       animated: true
78
       animated: true
64
     });
79
     });
65
   }
80
   }
81
+  onSwitchTabPress() {
82
+    this.props.navigator.switchToTab({
83
+      tabIndex: 0
84
+    });
85
+  }
86
+  onSetTabBadgePress() {
87
+    this.props.navigator.setTabBadge({
88
+      badge: 12
89
+    });
90
+  }
91
+  onToggleTabsPress() {
92
+    this.props.navigator.toggleTabs({
93
+      to: this.tabsHidden ? 'shown' : 'hidden'
94
+    });
95
+    this.tabsHidden = !this.tabsHidden;
96
+  }
66
   onNavigatorEvent(event) {
97
   onNavigatorEvent(event) {
67
     // handle a deep link
98
     // handle a deep link
68
     if (event.type == 'DeepLink') {
99
     if (event.type == 'DeepLink') {
73
           screen: parts[1],
104
           screen: parts[1],
74
           animated: true
105
           animated: true
75
         });
106
         });
107
+        this.props.navigator.switchToTab();
76
       }
108
       }
77
     }
109
     }
78
     // handle a button press
110
     // handle a button press

+ 3
- 0
example/src/screens/ThirdTabScreen.js Bestand weergeven

8
 } from 'react-native';
8
 } from 'react-native';
9
 
9
 
10
 export default class ThirdTabScreen extends Component {
10
 export default class ThirdTabScreen extends Component {
11
+  static navigatorStyle = {
12
+    drawUnderTabBar: true
13
+  };
11
   constructor(props) {
14
   constructor(props) {
12
     super(props);
15
     super(props);
13
   }
16
   }

+ 1
- 1
package.json Bestand weergeven

21
     "react-native": ">=0.19.0"
21
     "react-native": ">=0.19.0"
22
   },
22
   },
23
   "dependencies": {
23
   "dependencies": {
24
-    "react-native-controllers": "^1.2.5"
24
+    "react-native-controllers": "^1.2.6"
25
   },
25
   },
26
   "optionalDependencies": {
26
   "optionalDependencies": {
27
     "react-redux": "*"
27
     "react-redux": "*"

+ 9
- 0
src/Screen.js Bestand weergeven

38
   toggleDrawer(params = {}) {
38
   toggleDrawer(params = {}) {
39
     return platformSpecific.navigatorToggleDrawer(this, params);
39
     return platformSpecific.navigatorToggleDrawer(this, params);
40
   }
40
   }
41
+  toggleTabs(params = {}) {
42
+    return platformSpecific.navigatorToggleTabs(this, params);
43
+  }
44
+  setTabBadge(params = {}) {
45
+    return platformSpecific.navigatorSetTabBadge(this, params);
46
+  }
47
+  switchToTab(params = {}) {
48
+    return platformSpecific.navigatorSwitchToTab(this, params);
49
+  }
41
   setOnNavigatorEvent(callback) {
50
   setOnNavigatorEvent(callback) {
42
     this.navigatorEventHandler = callback;
51
     this.navigatorEventHandler = callback;
43
     if (!this.navigatorEventSubscription) {
52
     if (!this.navigatorEventSubscription) {

+ 46
- 2
src/platformSpecific.ios.js Bestand weergeven

35
     },
35
     },
36
     renderBody: function() {
36
     renderBody: function() {
37
       return (
37
       return (
38
-        <TabBarControllerIOS id={controllerID + '_tabs'}>
38
+        <TabBarControllerIOS
39
+          id={controllerID + '_tabs'}
40
+          style={params.tabsStyle}
41
+        >
39
         {
42
         {
40
           params.tabs.map(function(tab, index) {
43
           params.tabs.map(function(tab, index) {
41
             const navigatorID = controllerID + '_nav' + index;
44
             const navigatorID = controllerID + '_nav' + index;
251
   }
254
   }
252
 }
255
 }
253
 
256
 
257
+function navigatorToggleTabs(navigator, params) {
258
+  const controllerID = navigator.navigatorID.split('_')[0];
259
+  Controllers.TabBarControllerIOS(controllerID + '_tabs').setHidden({
260
+    hidden: params.to == 'hidden',
261
+    animated: !(params.animated === false)
262
+  });
263
+}
264
+
265
+function navigatorSetTabBadge(navigator, params) {
266
+  const controllerID = navigator.navigatorID.split('_')[0];
267
+  if (params.tabIndex || params.tabIndex === 0) {
268
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').setBadge({
269
+      tabIndex: params.tabIndex,
270
+      badge: params.badge
271
+    });
272
+  } else {
273
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').setBadge({
274
+      contentId: navigator.navigatorID,
275
+      contentType: 'NavigationControllerIOS',
276
+      badge: params.badge
277
+    });
278
+  }
279
+}
280
+
281
+function navigatorSwitchToTab(navigator, params) {
282
+  const controllerID = navigator.navigatorID.split('_')[0];
283
+  if (params.tabIndex || params.tabIndex === 0) {
284
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').switchTo({
285
+      tabIndex: params.tabIndex
286
+    });
287
+  } else {
288
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').switchTo({
289
+      contentId: navigator.navigatorID,
290
+      contentType: 'NavigationControllerIOS'
291
+    });
292
+  }
293
+}
294
+
254
 function navigatorSetButtons(navigator, navigatorEventID, params) {
295
 function navigatorSetButtons(navigator, navigatorEventID, params) {
255
   if (params.leftButtons) {
296
   if (params.leftButtons) {
256
     const buttons = params.leftButtons.slice(); // clone
297
     const buttons = params.leftButtons.slice(); // clone
319
   dismissModal,
360
   dismissModal,
320
   navigatorSetButtons,
361
   navigatorSetButtons,
321
   navigatorSetTitle,
362
   navigatorSetTitle,
322
-  navigatorToggleDrawer
363
+  navigatorToggleDrawer,
364
+  navigatorToggleTabs,
365
+  navigatorSetTabBadge,
366
+  navigatorSwitchToTab
323
 }
367
 }