Parcourir la source

setTabButton to change the label of the TabButton (#2215)

* setTabButton -> has now the property 'label' to change the label of the TabButton

* Add to documentation

* [BugFix] use i instead of 0 to check all TabItems
Daniel Lang il y a 7 ans
Parent
révision
f50b1e0d68

+ 16
- 4
android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java Voir le fichier

@@ -57,10 +57,22 @@ public class BottomTabs extends AHBottomNavigation {
57 57
     }
58 58
 
59 59
     public void setTabButton(ScreenParams params, Integer index) {
60
-        if (params.tabIcon != null) {
60
+        if (params.tabIcon != null || params.tabLabel != null) {
61 61
             AHBottomNavigationItem item = this.getItem(index);
62
-            item.setDrawable(params.tabIcon);
63
-            refresh();
62
+            boolean tabNeedsRefresh = false;
63
+
64
+            if (params.tabIcon != null) {
65
+                item.setDrawable(params.tabIcon);
66
+                tabNeedsRefresh = true;
67
+            }
68
+            if (params.tabLabel != null) {
69
+                item.setTitle(params.tabLabel);
70
+                tabNeedsRefresh = true;
71
+            }
72
+
73
+            if (tabNeedsRefresh) {
74
+                this.refresh();
75
+            }
64 76
         }
65 77
     }
66 78
 
@@ -76,7 +88,7 @@ public class BottomTabs extends AHBottomNavigation {
76 88
 
77 89
     private boolean hasTabsWithLabels() {
78 90
         for (int i = 0; i < getItemsCount(); i++) {
79
-            String title = getItem(0).getTitle(getContext());
91
+            String title = getItem(i).getTitle(getContext());
80 92
             if (!TextUtils.isEmpty(title)) {
81 93
                 return true;
82 94
             }

+ 1
- 0
docs/screen-api.md Voir le fichier

@@ -242,6 +242,7 @@ this.props.navigator.setTabButton({
242 242
   tabIndex: 0, // (optional) if missing, the icon will be added to this screen's tab
243 243
   icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional)
244 244
   selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only)
245
+  label: 'New Label' // tab label that appears under the icon (optional)
245 246
 });
246 247
 ```
247 248
 

+ 7
- 1
ios/RCCTabBarController.m Voir le fichier

@@ -329,8 +329,8 @@
329 329
         iconImage = [RCTConvert UIImage:icon];
330 330
         iconImage = [[self image:iconImage withColor:self.tabBar.tintColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
331 331
         viewController.tabBarItem.image = iconImage;
332
-      
333 332
       }
333
+      
334 334
       UIImage *iconImageSelected = nil;
335 335
       id selectedIcon = actionParams[@"selectedIcon"];
336 336
       if (selectedIcon && selectedIcon != (id)[NSNull null])
@@ -338,6 +338,12 @@
338 338
         iconImageSelected = [RCTConvert UIImage:selectedIcon];
339 339
         viewController.tabBarItem.selectedImage = iconImageSelected;
340 340
       }
341
+      
342
+      id label = actionParams[@"label"];
343
+      if (label && label != (id)[NSNull null])
344
+      {
345
+        viewController.tabBarItem.title = label;
346
+      }
341 347
     }
342 348
   }
343 349
   

+ 4
- 2
src/deprecated/platformSpecificDeprecated.ios.js Voir le fichier

@@ -441,14 +441,16 @@ function navigatorSetTabButton(navigator, params) {
441 441
     Controllers.TabBarControllerIOS(controllerID + '_tabs').setTabButton({
442 442
       tabIndex: params.tabIndex,
443 443
       icon: params.icon,
444
-      selectedIcon: params.selectedIcon
444
+      selectedIcon: params.selectedIcon,
445
+      label: params.label,
445 446
     });
446 447
   } else {
447 448
     Controllers.TabBarControllerIOS(controllerID + '_tabs').setTabButton({
448 449
       contentId: navigator.navigatorID,
449 450
       contentType: 'NavigationControllerIOS',
450 451
       icon: params.icon,
451
-      selectedIcon: params.selectedIcon
452
+      selectedIcon: params.selectedIcon,
453
+      label: params.label,
452 454
     });
453 455
   }
454 456
 }