NativeScript Angular：如何为BottomNavigation设置顶部圆角？

方案一：外层容器包裹+内容裁剪 #

直接给BottomNavigation设置border-radius无效，多是因为组件内部原生视图层级的限制。你可以用GridLayout这类容器组件包裹它，通过容器实现圆角并裁剪内部内容：

.bottom-nav-wrapper {
  border-top-left-radius: 20;
  border-top-right-radius: 20;
  overflow: hidden;
  height: 56; /* 高度和BottomNavigation保持一致，可按需调整 */
}

.material-bottom-nav {
  background-color: transparent; /* 移除组件自身背景，避免覆盖容器圆角效果 */
}

对应模板代码：

<GridLayout class="bottom-nav-wrapper">
  <BottomNavigation class="material-bottom-nav">
    <TabStrip>
      <TabStripItem>
        <Label text="首页"></Label>
      </TabStripItem>
      <TabStripItem>
        <Label text="我的"></Label>
      </TabStripItem>
    </TabStrip>
    <TabContentItem>
      <page-router-outlet name="home"></page-router-outlet>
    </TabContentItem>
    <TabContentItem>
      <page-router-outlet name="profile"></page-router-outlet>
    </TabContentItem>
  </BottomNavigation>
</GridLayout>

方案二：通过原生视图API分平台设置 #

NativeScript Material组件依赖原生控件实现，你可以直接访问原生视图对象来设置圆角：

Android端 #

在组件loaded事件中获取Android原生BottomNavigationView，创建带圆角的Drawable作为背景：

import { Component, ViewChild } from "@angular/core";
import { BottomNavigation } from "@nativescript-community/ui-material-bottom-navigation";
import { android, utils } from "@nativescript/core";

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild(BottomNavigation) bottomNav: BottomNavigation;

  onBottomNavLoaded() {
    if (android) {
      const nativeView = this.bottomNav.nativeView as com.google.android.material.bottomnavigation.BottomNavigationView;
      const drawable = new android.graphics.drawable.GradientDrawable();
      // 按左上、右上、右下、左下顺序设置圆角，单位为px，这里用utils将dp转px
      const radius = utils.layout.toDevicePixels(20);
      drawable.setCornerRadii([radius, radius, radius, radius, 0, 0, 0, 0]);
      drawable.setColor(android.graphics.Color.parseColor("#ffffff")); // 设置和主题匹配的背景色
      nativeView.setBackground(drawable);
    }
  }
}

模板绑定加载事件：

<BottomNavigation (loaded)="onBottomNavLoaded()">
  <!-- 导航项内容 -->
</BottomNavigation>

iOS端 #

访问iOS原生视图的layer属性，指定圆角位置并开启裁剪：

import { Component, ViewChild } from "@angular/core";
import { BottomNavigation } from "@nativescript-community/ui-material-bottom-navigation";
import { ios, utils } from "@nativescript/core";

@Component({
  // 组件元数据
})
export class YourComponent {
  @ViewChild(BottomNavigation) bottomNav: BottomNavigation;

  onBottomNavLoaded() {
    if (ios) {
      const nativeView = this.bottomNav.nativeView as UIView;
      const radius = utils.layout.toDevicePixels(20);
      nativeView.layer.cornerRadius = radius;
      // 仅保留左上、右上圆角（iOS CALayerCornerMask常量映射）
      nativeView.layer.maskedCorners = 1 << 0 | 1 << 1;
      nativeView.layer.masksToBounds = true;
    }
  }
}

方案三：自定义Material主题变量（部分版本支持） #

如果你的组件版本支持主题变量，可以在app.css中直接配置：

@import "@nativescript-community/ui-material-bottom-navigation/css";

:root {
  --bottom-navigation-background-color: #ffffff;
  --bottom-navigation-border-radius: 20 20 0 0;
}

注：若组件版本不支持该变量，优先使用前两种方案。

内容的提问来源于stack exchange，提问作者Jonas