使用angular nativescript for android和ios的透明选项卡栏和操作栏

我想使选项卡栏和操作栏在swipelayout或页面上透明。操作或选项卡栏必须像两层一样位于页面顶部

我曾尝试使用css使页面透明，但它在整个页面上并没有变得透明

<ActionBar title="Name" backgroundColor="#00000000"></ActionBar>

<TabView androidTabsPosition="bottom" selectedTabTextColor="white">
   <page-router-outlet
      *tabItem="{iconSource: getIconSource('test')}"
       name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{iconSource: getIconSource('test2')}"
        name="locationTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{iconSource: getIconSource('test3')}"
        name="searchTab">
    </page-router-outlet>
</TabView>

---

使用您选择的背景图像或颜色来设计页面/根布局

.page {
       background: url(https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962__340.jpg);
       background-repeat: no-repeat;
       background-size: cover;
    }

Android


将
ActionBar
的
backgroundColor
设置为
transparent
加载
后
事件调整
页面
元件单元系统

onLoaded(event: EventData) {
    const layout = <GridLayout>event.object,
       page = layout.page;

    if (page.android) {
       page.android.removeRowAt(0);
    }
}

（根据v5.x验证兼容性）

onActionBarLoaded(event: EventData) {
    const actionBar = <ActionBar>event.object;
    if (actionBar.ios) {
        (<any>actionBar).updateFlatness = function (navBar) {
            actionBar.ios.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
            actionBar.ios.translucent = true;
        };
    }
}