nativescript - 使用适用于 Android 和 ios 的 Angular NativeScript 的透明选项卡栏和操作栏

Question

我想让标签栏透明，操作栏在滑动布局或页面上透明。操作栏或选项卡栏必须位于页面顶部，就像两层一样

我尝试使用 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>

页面上的透明操作栏

Example

Answer 1

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

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

安卓

• 将ActionBar的backgroundColor设置为透明

• 根据loaded事件调整Page元素单位系统

  onLoaded(event: EventData) {
      const layout = <GridLayout>event.object,
         page = layout.page;
  
      if (page.android) {
         page.android.removeRowAt(0);
      }
  }
  

• 调整根布局的内边距，使内容不会与 ActionBar 重叠

iOS

根据loaded事件调整ActionBar属性

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;
        };
    }
}

Playground Sample (针对 v5.x 验证兼容性)