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
         disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
13
         disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
14
         disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
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
         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.
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
         icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
21
         icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
53
     testID: 'e2e_is_awesome', // if you have e2e tests, use this to find your button
56
     testID: 'e2e_is_awesome', // if you have e2e tests, use this to find your button
54
     disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
57
     disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
55
     disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
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
   leftButtons: [] // buttons for the left side of the nav bar (optional)
63
   leftButtons: [] // buttons for the left side of the nav bar (optional)
58
 }
64
 }

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

29
   navBarTextFontFamily: 'font-name', // Changes the title font
29
   navBarTextFontFamily: 'font-name', // Changes the title font
30
   navBarTitleTextCentered: true, // Android only. centers the title, default false.
30
   navBarTitleTextCentered: true, // Android only. centers the title, default false.
31
   navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
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
   navBarHidden: false, // make the nav bar hidden
45
   navBarHidden: false, // make the nav bar hidden
34
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
46
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
35
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true
47
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true

+ 6
- 0
ios/RCCNavigationController.m View File

6
 #import <objc/runtime.h>
6
 #import <objc/runtime.h>
7
 #import "RCCTitleViewHelper.h"
7
 #import "RCCTitleViewHelper.h"
8
 #import "UIViewController+Rotation.h"
8
 #import "UIViewController+Rotation.h"
9
+#import "RCTHelpers.h"
9
 
10
 
10
 @implementation RCCNavigationController
11
 @implementation RCCNavigationController
11
 {
12
 {
279
     else if (title)
280
     else if (title)
280
     {
281
     {
281
       barButtonItem = [[UIBarButtonItem alloc] initWithTitle:title style:UIBarButtonItemStylePlain target:self action:@selector(onButtonPress:)];
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
     else continue;
289
     else continue;
284
     objc_setAssociatedObject(barButtonItem, &CALLBACK_ASSOCIATED_KEY, button[@"onPress"], OBJC_ASSOCIATION_RETAIN_NONATOMIC);
290
     objc_setAssociatedObject(barButtonItem, &CALLBACK_ASSOCIATED_KEY, button[@"onPress"], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

+ 16
- 3
ios/RCCViewController.m View File

269
   }
269
   }
270
   
270
   
271
   NSMutableDictionary *navButtonTextAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"navBarButton"];
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
     for (UIBarButtonItem *item in viewController.navigationItem.leftBarButtonItems) {
281
     for (UIBarButtonItem *item in viewController.navigationItem.leftBarButtonItems) {
276
       [item setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
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
     for (UIBarButtonItem *item in viewController.navigationItem.rightBarButtonItems) {
289
     for (UIBarButtonItem *item in viewController.navigationItem.rightBarButtonItems) {
280
       [item setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
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
     // At the moment, this seems to be the only thing that gets the back button correctly
297
     // At the moment, this seems to be the only thing that gets the back button correctly
284
     [navButtonTextAttributes removeObjectForKey:NSForegroundColorAttributeName];
298
     [navButtonTextAttributes removeObjectForKey:NSForegroundColorAttributeName];
285
     [[UIBarButtonItem appearance] setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
299
     [[UIBarButtonItem appearance] setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
286
-    //        [viewController.navigationItem.backBarButtonItem setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
287
   }
300
   }
288
   
301
   
289
   NSString *navBarButtonColor = self.navigatorStyle[@"navBarButtonColor"];
302
   NSString *navBarButtonColor = self.navigatorStyle[@"navBarButtonColor"];