Android 在nativescript的底部导航中使用SVG代替常规图像

我正在使用Angular nativescript构建一个android应用程序。在我的应用程序中，我在页面底部有一个标签导航菜单，类型为

BottomNavigation

。对于每个

TabStripItem

，我可以放置一个标签和一个图像。问题是我想在那里放一个SVG图像，而不是常规图像，但它只接受一个图像和一个标签。我怎样才能解决这个问题

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

---

使用当前的Nativescript TabStrip组件是不可能的，我正在附加我在项目中使用的代码以实现所需的结果

tabs.component.html

---

使用相同的技术可能会帮助您完成，所以基本上您只是自己构建选项卡，而不是使用内置元素？是的，当前内置选项卡不支持SVG图像，因此我们必须自己构建它们。请不要忘记标记答案（如果有帮助的话），如果您有任何与问题相关的问题，请填写并自由评论

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

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()
    }
  }
}