NativeScript ActionBar Opacity
<p>I try to change the opacity of the actionbar. For test i try to change the color over native method but this won't work.</p>

<p>I don't understand why, other native functions like UIAlert works fine.
I have no error or anything else only that the actionbar looks like this:</p>

<p><a href="https://i.stack.imgur.com/OGWHr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OGWHr.png" alt="enter image description here"></a></p>

<p>My target is completely transparent because the background has a gradient.</p>

<p>This is my page loaded function:</p>

<pre><code>loaded(args){
        let page = &lt;Page&gt;args.object;
        page.bindingContext = appViewModel;

        if (page.ios) {
            var controller = frameModule.topmost().ios.controller;
            var navigationBar = controller.navigationBar;
            navigationBar.barTintColor = UIColor.blueColor();
        }
    }
</code></pre>

<p>thanks for help</p>

<p><strong>UPDATE</strong></p>

<p>my ts code:</p>

<pre><code>var frameModule = require("ui/frame");
import {topmost} from "ui/frame";
import {Page} from "ui/page";
import {Observable, EventData} from "data/observable";
import {View} from "ui/core/view";

let appViewModel = new Observable({selectedPage: "dashboard"});
export abstract class BasePage {
    //implement this function in the inheriting pages to set their specific binding context
    abstract mainContentLoaded(args:EventData);

    loaded(args){
                let page = &lt;Page&gt;args.object;
                page.bindingContext = appViewModel;

                if (page.ios) {
            frameModule.topmost().ios.navBarVisibility = "always";

            page.ios.title = "Test Application";

            var controller = frameModule.topmost().ios.controller;

            var navBar = controller.navigationBar;
            navBar.barTintColor = UIColor.redColor();
            navBar.navigationBarHidden = false;
            navBar.barStyle = UIBarStyle.UIBarStyleBlackTranslucent;
        }

    }

    toggleDrawer(){
        let page = &lt;Page&gt;topmost().currentPage;
        let drawer = &lt;any&gt;page.getViewById("sidebar");
        drawer.toggleDrawerState();
    }
    navigate(args){
        let pageName = args.view.text.toLowerCase();
        appViewModel.set("selectedPage", pageName);
        topmost().navigate("modules/" + pageName + "/" + pageName);
    }

}
</code></pre>

<p>my xml:</p>

<pre><code>&lt;page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:drawer="nativescript-telerik-ui/sidedrawer"
  xmlns:widgets="shared/widgets"
  loaded="loaded"&gt;

  &lt;page.actionBar&gt;
    &lt;action-bar&gt;
      &lt;navigation-button icon="res://ic_menu" tap="toggleDrawer" ios:visibility="collapsed" /&gt;
      &lt;action-bar.actionItems&gt;
        &lt;ios&gt;
          &lt;action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" /&gt;
        &lt;/ios&gt;
      &lt;/action-bar.actionItems&gt;
    &lt;/action-bar&gt;
  &lt;/page.actionBar&gt;

  &lt;drawer:rad-side-drawer id="sidebar"&gt;
    &lt;drawer:rad-side-drawer.mainContent&gt;

    &lt;/drawer:rad-side-drawer.mainContent&gt;
    &lt;drawer:rad-side-drawer.drawerContent&gt;
      &lt;widgets:drawer-content /&gt;
    &lt;/drawer:rad-side-drawer.drawerContent&gt;
  &lt;/drawer:rad-side-drawer&gt;

&lt;/page&gt;
</code></pre>