mirror of
https://github.com/status-im/react-native.git
synced 2025-01-28 18:25:06 +00:00
Nav ios hide hairline
Summary: For the current project I am working on I needed to add a boolean option (`shadowHidden`) to remove the 1px hairline shadow from the NavigationIOS component: `<NavigatorIOS shadowHidden={true} initialRoute={...} />` By default, or with `shadowHidden={false}` it looks like this: ![withhairline](https://cloud.githubusercontent.com/assets/129330/8145401/d2704956-11d4-11e5-86e8-a75435b68480.png) Setting the shadow hidden with `shadowHidden={true}` looks like this: ![nohairline2](https://cloud.githubusercontent.com/assets/129330/8145405/148ed56e-11d5-11e5-85d6-f8cd3453d5ac.png) The code it uses to do the actual hiding is... a bit of a hack (*I* think), but it's the only way currently to do it, and is the way they do it in the iPhone calendar app: iterating through the subviews and removing the shadow image. This removes the shadow *and* keeps the translucent blurry effect with a ScrollView (see this [SO discussion](http://stackoverflow.com/questions/18160173/how-to-remove-uinavigationbar-inner Closes https://github.com/facebook/react-native/pull/1615 Github Author: Mr Speaker <mrspeaker@gmail.com>
This commit is contained in:
parent
9f94dd457a
commit
2cb634bb0b
@ -60,6 +60,7 @@ var RCTNavigatorItem = createReactNativeComponentClass({
|
|||||||
tintColor: true,
|
tintColor: true,
|
||||||
translucent: true,
|
translucent: true,
|
||||||
navigationBarHidden: true,
|
navigationBarHidden: true,
|
||||||
|
shadowHidden: true,
|
||||||
titleTextColor: true,
|
titleTextColor: true,
|
||||||
style: true,
|
style: true,
|
||||||
},
|
},
|
||||||
@ -281,6 +282,11 @@ var NavigatorIOS = React.createClass({
|
|||||||
*/
|
*/
|
||||||
navigationBarHidden: PropTypes.bool,
|
navigationBarHidden: PropTypes.bool,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A Boolean value that indicates whether to hide the 1px hairline shadow
|
||||||
|
*/
|
||||||
|
shadowHidden: PropTypes.bool,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The default wrapper style for components in the navigator.
|
* The default wrapper style for components in the navigator.
|
||||||
* A common use case is to set the backgroundColor for every page
|
* A common use case is to set the backgroundColor for every page
|
||||||
@ -640,6 +646,7 @@ var NavigatorIOS = React.createClass({
|
|||||||
rightButtonTitle={route.rightButtonTitle}
|
rightButtonTitle={route.rightButtonTitle}
|
||||||
onNavRightButtonTap={route.onRightButtonPress}
|
onNavRightButtonTap={route.onRightButtonPress}
|
||||||
navigationBarHidden={this.props.navigationBarHidden}
|
navigationBarHidden={this.props.navigationBarHidden}
|
||||||
|
shadowHidden={this.props.shadowHidden}
|
||||||
tintColor={this.props.tintColor}
|
tintColor={this.props.tintColor}
|
||||||
barTintColor={this.props.barTintColor}
|
barTintColor={this.props.barTintColor}
|
||||||
translucent={this.props.translucent !== false}
|
translucent={this.props.translucent !== false}
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
@property (nonatomic, strong) UIImage *backButtonIcon;
|
@property (nonatomic, strong) UIImage *backButtonIcon;
|
||||||
@property (nonatomic, copy) NSString *backButtonTitle;
|
@property (nonatomic, copy) NSString *backButtonTitle;
|
||||||
@property (nonatomic, assign) BOOL navigationBarHidden;
|
@property (nonatomic, assign) BOOL navigationBarHidden;
|
||||||
|
@property (nonatomic, assign) BOOL shadowHidden;
|
||||||
@property (nonatomic, strong) UIColor *tintColor;
|
@property (nonatomic, strong) UIColor *tintColor;
|
||||||
@property (nonatomic, strong) UIColor *barTintColor;
|
@property (nonatomic, strong) UIColor *barTintColor;
|
||||||
@property (nonatomic, strong) UIColor *titleTextColor;
|
@property (nonatomic, strong) UIColor *titleTextColor;
|
||||||
|
@ -22,6 +22,7 @@ RCT_EXPORT_MODULE()
|
|||||||
}
|
}
|
||||||
|
|
||||||
RCT_EXPORT_VIEW_PROPERTY(navigationBarHidden, BOOL)
|
RCT_EXPORT_VIEW_PROPERTY(navigationBarHidden, BOOL)
|
||||||
|
RCT_EXPORT_VIEW_PROPERTY(shadowHidden, BOOL)
|
||||||
RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
|
RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
|
||||||
RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
|
RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
|
||||||
RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
|
RCT_EXPORT_VIEW_PROPERTY(translucent, BOOL)
|
||||||
|
@ -63,6 +63,20 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:(NSCoder *)aDecoder)
|
|||||||
_currentBottomLayoutGuide = self.bottomLayoutGuide;
|
_currentBottomLayoutGuide = self.bottomLayoutGuide;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static UIView *RCTFindNavBarShadowViewInView(UIView *view)
|
||||||
|
{
|
||||||
|
if ([view isKindOfClass:[UIImageView class]] && view.bounds.size.height <= 1) {
|
||||||
|
return view;
|
||||||
|
}
|
||||||
|
for (UIView *subview in view.subviews) {
|
||||||
|
UIView *shadowView = RCTFindNavBarShadowViewInView(subview);
|
||||||
|
if (shadowView) {
|
||||||
|
return shadowView;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return nil;
|
||||||
|
}
|
||||||
|
|
||||||
- (void)viewWillAppear:(BOOL)animated
|
- (void)viewWillAppear:(BOOL)animated
|
||||||
{
|
{
|
||||||
[super viewWillAppear:animated];
|
[super viewWillAppear:animated];
|
||||||
@ -71,20 +85,18 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:(NSCoder *)aDecoder)
|
|||||||
if ([self.parentViewController isKindOfClass:[UINavigationController class]])
|
if ([self.parentViewController isKindOfClass:[UINavigationController class]])
|
||||||
{
|
{
|
||||||
[self.navigationController
|
[self.navigationController
|
||||||
setNavigationBarHidden:_navItem.navigationBarHidden
|
setNavigationBarHidden:_navItem.navigationBarHidden
|
||||||
animated:animated];
|
animated:animated];
|
||||||
|
|
||||||
if (!_navItem) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
UINavigationBar *bar = self.navigationController.navigationBar;
|
UINavigationBar *bar = self.navigationController.navigationBar;
|
||||||
bar.barTintColor = _navItem.barTintColor;
|
bar.barTintColor = _navItem.barTintColor;
|
||||||
bar.tintColor = _navItem.tintColor;
|
bar.tintColor = _navItem.tintColor;
|
||||||
bar.translucent = _navItem.translucent;
|
bar.translucent = _navItem.translucent;
|
||||||
if (_navItem.titleTextColor) {
|
bar.titleTextAttributes = _navItem.titleTextColor ? @{
|
||||||
[bar setTitleTextAttributes:@{NSForegroundColorAttributeName : _navItem.titleTextColor}];
|
NSForegroundColorAttributeName: _navItem.titleTextColor
|
||||||
}
|
} : nil;
|
||||||
|
|
||||||
|
RCTFindNavBarShadowViewInView(bar).hidden = _navItem.shadowHidden;
|
||||||
|
|
||||||
UINavigationItem *item = self.navigationItem;
|
UINavigationItem *item = self.navigationItem;
|
||||||
item.title = _navItem.title;
|
item.title = _navItem.title;
|
||||||
@ -129,7 +141,8 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:(NSCoder *)aDecoder)
|
|||||||
// finishes, be it a swipe to go back or a standard tap on the back button
|
// finishes, be it a swipe to go back or a standard tap on the back button
|
||||||
[super didMoveToParentViewController:parent];
|
[super didMoveToParentViewController:parent];
|
||||||
if (parent == nil || [parent isKindOfClass:[UINavigationController class]]) {
|
if (parent == nil || [parent isKindOfClass:[UINavigationController class]]) {
|
||||||
[self.navigationListener wrapperViewController:self didMoveToNavigationController:(UINavigationController *)parent];
|
[self.navigationListener wrapperViewController:self
|
||||||
|
didMoveToNavigationController:(UINavigationController *)parent];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user