android - SVG而不是nativescript底部导航中的常规图像
问题描述
我正在使用 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
<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()
}
}
}
使用相同的技术也可以帮助你
推荐阅读
- java - 如何使用 fluent builder api 创建多实例 camunda 子进程
- c++ - 为什么这段代码在调试版本中无限运行,但在发布版本中立即退出?
- flutter - easy_localization 等待加载保存的语言环境
- java - 无法在 Apache Tomcat 8.5 中将 mappedfile 更改为 false
- flutter - 在有状态的小部件颤动中访问数据
- c# - 带有 Redis 横向扩展/背板的 ASP.NET SignalR 导致服务器负载线性增加
- python - 将一维张量转换为二维张量的 Python 代码
- mobx - 无法将引用“801214578”解析为类型“AnonymousModel”mobx-state-tree
- dashboard - Cognos Dashboard:从两个数据集创建查询
- python - 为一个函数设置多个名称