-
-
Save shiv19/1d027194e8d1107c5be20b6382b9b450 to your computer and use it in GitHub Desktop.
| import { Frame } from '@nativescript/core/ui/frame'; | |
| import { Color } from '@nativescript/core/color'; | |
| import { isIOS } from '@nativescript/core/platform'; | |
| /* | |
| // Legacy require statements if using Vanilla {N} | |
| const Frame = require('@nativescript/core/ui/frame').Frame; | |
| const Color = require('@nativescript/core/color').Color; | |
| const isIOS = require('@nativescript/core/platform').isIOS; | |
| */ | |
| // declare these if you are using TS and not using tns-platform-declarations | |
| declare var CAGradientLayer, CGPointMake, UIGraphicsBeginImageContext, UIGraphicsGetCurrentContext; | |
| declare var UIGraphicsGetImageFromCurrentImageContext, UIBarMetrics, CGSizeMake, UIGraphicsEndImageContext; | |
| export function onActionBarLoaded(args) { | |
| if (isIOS) { | |
| const navigationBar = Frame.topmost().ios.controller.navigationBar; | |
| const gradient = CAGradientLayer.layer(); | |
| const bounds = navigationBar.bounds; | |
| gradient.frame = bounds; | |
| gradient.colors = [new Color('#007fbe').ios.CGColor, new Color('#00bdda').ios.CGColor]; | |
| gradient.startPoint = CGPointMake(0, 0); | |
| gradient.endPoint = CGPointMake(1, 0); | |
| const size = CGSizeMake(bounds.size.width, bounds.size.height); | |
| UIGraphicsBeginImageContext(size); | |
| gradient.renderInContext(UIGraphicsGetCurrentContext()); | |
| const gradientImage = UIGraphicsGetImageFromCurrentImageContext(); | |
| UIGraphicsEndImageContext(); | |
| // doesn't work without this setTimeout | |
| setTimeout(() => { | |
| navigationBar.setBackgroundImageForBarMetrics(gradientImage, UIBarMetrics.default); | |
| }); | |
| } | |
| } |
Hey man, I'm having the same issue, are you using angular? I put this code in the ngOnInit function, then I tried ngAfterViewInit. I'm sure it's running once when loaded, but needs to be in some other kind of event instead. Did you end up finding a solution?
In angular you can set it up on the page navigation event.
constructor( private page: Page ) { this.page.on( Page.navigatedToEvent, () => { /*Call to shivs code*/ this.iosGradientNavbar(); }); }
Hey man, I'm having the same issue, are you using angular? I put this code in the ngOnInit function, then I tried ngAfterViewInit. I'm sure it's running once when loaded, but needs to be in some other kind of event instead. Did you end up finding a solution?
In angular you can set it up on the page navigation event.
constructor( private page: Page ) { this.page.on( Page.navigatedToEvent, () => { /*Call to shivs code*/ this.iosGradientNavbar(); }); }
Hi, can you show me how can do it with vue?
Hey man, I'm having the same issue, are you using angular? I put this code in the ngOnInit function, then I tried ngAfterViewInit. I'm sure it's running once when loaded, but needs to be in some other kind of event instead. Did you end up finding a solution?