在本机脚本的底部导航中使用 SVG 而不是常规图像

Question

我正在使用 Angular nativescript 构建一个 android 应用程序。在我的应用程序中，我在 BottomNavigation 类型的页面底部有一个选项卡导航菜单。对于每个 TabStripItem 我可以放一个标签和一张图片。问题是我想放一个 SVG 图像而不是常规图像，但它只接受一个图像和一个标签。我该如何解决？

<BottomNavigation>
    <TabStrip>
        <TabStripItem>
            <label text="some text"></label>
            <SVGImage src="image source"></SVGImage>
        </TabStripItem>
    </TabStrip>
</BottomNavigation>

Answer 1

当前的 Nativescript TabStrip 组件无法实现，我附上了我在我的项目中使用的代码以实现所需的结果。

tabs.component.html

<DockLayout>
    <GridLayout dock="bottom" class="tg-bg-tabs tg-text-light" columns="*,*,*,*" rows="auto">
        <StackLayout *ngFor="let tab of tabs; let idx = index" (tap)="onTabTapped(tab)" row="0" height="65" ripple
            rippleColor="#e0e0e0" [class.tg-text-primary]="isTabSelected(tab)" class="p-b-2 m-y-5" verticalAlignment="center"
            [class.font-weight-bold]="isTabSelected(tab)" col="{{idx}}">
            <SVGImage [src]="tab.icon" android:width="25" ios:width="25" android:height="25" ios:height="23"
                color="green" class="fas" horizontalAlignment="center" verticalAlignment="center"></SVGImage>
            <Label [text]="'tabs.' + tab.name | L" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>
    </GridLayout>
    <StackLayout>
        <page-router-outlet></page-router-outlet>
    </StackLayout>
</DockLayout>

tabs.component.ts

export class TabsComponent implements OnInit, OnDestroy {
  tabs = [
    { name: 'home', icon: '~/assets/images/other/home-active.svg' },
    { name: 'transfers', icon: '~/assets/images/other/transfers-muted.svg' },
    { name: 'products', icon: '~/assets/images/other/products-muted.svg' },
    { name: 'settings', icon: '~/assets/images/other/settings-muted.svg' },
  ]
  selectedTab = this.tabs[0]


  onTabTapped(tab) {
    if (!this.disableTap) {
      this.selectedTab = tab
      this.tabs.forEach((t) => {
        if (t.name === tab.name) {
          t.icon = `~/assets/images/other/${t.name}-active.svg`
        } else {
          t.icon = `~/assets/images/other/${t.name}-muted.svg`
        }
      })
      this.routerExtensions.navigate(['./' + tab.name], {
        relativeTo: this.activatedRoute,
      })
      this.ref.detectChanges()
    }
  }
}

使用相同的技巧也可能对您有所帮助

在本机脚本的底部导航中使用 SVG 而不是常规图像

SVG instead of regular image in Bottom navigation on nativescript

tabs

android

nativescript

angular