Browse Source

Add ability to set attributes of navigation bar buttons separately. (#937)

* Add ability to set attributes of navigation bar buttons separately.

* Added ability to set button style when calling `setButtons` method.

* Add documentation.
Urban Cvek 7 years ago
parent
commit
3ace6bb8c2

+ 6
- 0
docs/adding-buttons-to-the-navigator.md View File

@@ -13,6 +13,9 @@ class FirstTabScreen extends Component {
13 13
         disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
14 14
         disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
15 15
         showAsAction: 'ifRoom' // optional, Android only. Control how the button is displayed in the Toolbar. Accepted valued: 'ifRoom' (default) - Show this item as a button in an Action Bar if the system decides there is room for it. 'always' - Always show this item as a button in an Action Bar. 'withText' - When this item is in the action bar, always show it with a text label even if it also has an icon specified. 'never' - Never show this item as a button in an Action Bar.
16
+        buttonColor: 'blue', // Set color for the button (can also be used in setButtons function to set different button style programatically)
17
+        buttonFontSize: 14, // Set font size for the button (can also be used in setButtons function to set different button style programatically)
18
+        buttonFontWeight: '600', // Set font weight for the button (can also be used in setButtons function to set different button style programatically)
16 19
       },
17 20
       {
18 21
         icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
@@ -53,6 +56,9 @@ class FirstTabScreen extends Component {
53 56
     testID: 'e2e_is_awesome', // if you have e2e tests, use this to find your button
54 57
     disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
55 58
     disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
59
+    buttonColor: 'blue', // Set color for the button (can also be used in setButtons function to set different button style programatically)
60
+    buttonFontSize: 14, // Set font size for the button (can also be used in setButtons function to set different button style programatically)
61
+    buttonFontWeight: '600', // Set font weight for the button (can also be used in setButtons function to set different button style programatically)
56 62
   }],
57 63
   leftButtons: [] // buttons for the left side of the nav bar (optional)
58 64
 }

+ 13
- 1
docs/styling-the-navigator.md View File

@@ -29,7 +29,19 @@ export default class StyledScreen extends Component {
29 29
   navBarTextFontFamily: 'font-name', // Changes the title font
30 30
   navBarTitleTextCentered: true, // Android only. centers the title, default false.
31 31
   navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
32
-  navBarButtonColor: '#007aff', // change the button colors of the nav bar (eg. the back button) (remembered across pushes)
32
+
33
+  navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
34
+  navBarButtonFontSize: 20, // Change font size nav bar buttons (eg. the back button) (remembered across pushes)
35
+  navBarButtonFontWeight: '500', // Change font weight nav bar buttons (eg. the back button) (remembered across pushes)
36
+
37
+  navBarLeftButtonFontSize: 17, // Change font size of left nav bar button
38
+  navBarLeftButtonColor: 'red', // Change color of left nav bar button
39
+  navBarLeftButtonFontWeight: '400', // Change font weight of left nav bar button
40
+
41
+  navBarRightButtonFontSize: 17, // Change font size of right nav bar button
42
+  navBarRightButtonColor: 'blue', // Change color of right nav bar button
43
+  navBarRightButtonFontWeight: '600', // Change font weight of right nav bar button
44
+
33 45
   navBarHidden: false, // make the nav bar hidden
34 46
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
35 47
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true

+ 6
- 0
ios/RCCNavigationController.m View File

@@ -6,6 +6,7 @@
6 6
 #import <objc/runtime.h>
7 7
 #import "RCCTitleViewHelper.h"
8 8
 #import "UIViewController+Rotation.h"
9
+#import "RCTHelpers.h"
9 10
 
10 11
 @implementation RCCNavigationController
11 12
 {
@@ -279,6 +280,11 @@ NSString const *CALLBACK_ASSOCIATED_ID = @"RCCNavigationController.CALLBACK_ASSO
279 280
     else if (title)
280 281
     {
281 282
       barButtonItem = [[UIBarButtonItem alloc] initWithTitle:title style:UIBarButtonItemStylePlain target:self action:@selector(onButtonPress:)];
283
+
284
+      NSMutableDictionary *buttonTextAttributes = [RCTHelpers textAttributesFromDictionary:button withPrefix:@"button"];
285
+      if (buttonTextAttributes.allKeys.count > 0) {
286
+        [barButtonItem setTitleTextAttributes:buttonTextAttributes forState:UIControlStateNormal];
287
+      }
282 288
     }
283 289
     else continue;
284 290
     objc_setAssociatedObject(barButtonItem, &CALLBACK_ASSOCIATED_KEY, button[@"onPress"], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

+ 16
- 3
ios/RCCViewController.m View File

@@ -269,21 +269,34 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
269 269
   }
270 270
   
271 271
   NSMutableDictionary *navButtonTextAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"navBarButton"];
272
-  
273
-  if (navButtonTextAttributes.allKeys.count > 0) {
272
+  NSMutableDictionary *leftNavButtonTextAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"navBarLeftButton"];
273
+  NSMutableDictionary *rightNavButtonTextAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"navBarRightButton"];
274
+  
275
+  if (
276
+    navButtonTextAttributes.allKeys.count > 0 ||
277
+    leftNavButtonTextAttributes.allKeys.count > 0 ||
278
+    rightNavButtonTextAttributes.allKeys.count > 0
279
+  ) {
274 280
     
275 281
     for (UIBarButtonItem *item in viewController.navigationItem.leftBarButtonItems) {
276 282
       [item setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
283
+      
284
+      if (leftNavButtonTextAttributes.allKeys.count > 0) {
285
+        [item setTitleTextAttributes:leftNavButtonTextAttributes forState:UIControlStateNormal];
286
+      }
277 287
     }
278 288
     
279 289
     for (UIBarButtonItem *item in viewController.navigationItem.rightBarButtonItems) {
280 290
       [item setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
291
+      
292
+      if (rightNavButtonTextAttributes.allKeys.count > 0) {
293
+        [item setTitleTextAttributes:rightNavButtonTextAttributes forState:UIControlStateNormal];
294
+      }
281 295
     }
282 296
     
283 297
     // At the moment, this seems to be the only thing that gets the back button correctly
284 298
     [navButtonTextAttributes removeObjectForKey:NSForegroundColorAttributeName];
285 299
     [[UIBarButtonItem appearance] setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
286
-    //        [viewController.navigationItem.backBarButtonItem setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
287 300
   }
288 301
   
289 302
   NSString *navBarButtonColor = self.navigatorStyle[@"navBarButtonColor"];