NativeScript TabView中的徽章

编程问答 2022-10-31

问题描述

我需要我的应用在TabView上显示红色徽章，就像显示在here的LinkedIn应用上的红色徽章。

有人知道如何在NativeScript中做到这一点吗？

解决方法

尝试使用这种方式获取徽章。

1。为自定义标签创建组件：- 

   <GridLayout rows="*" backgroundColor="#ffffff" borderTopWidth="0.5" 
     borderTopColor="#cfd8df" verticalAlignment="bottom"
     columns="*,*,*">
   <Ripple class="button-bottom-layout" (tap)="gotoDashboardPage()" row="0" 
   col="0">
    <GridLayout rows="auto,auto" orientation="horizontal">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isHomeStatus ? '~/app/images/icon/home-dark.png':'~/app/images/icon/home-normal.png'"
            [tintColor]="isHomeStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isHomeStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.home"></Label>
        <StackLayout rowspan="2" height="20" width="20" backgroundColor="green" verticalAlignment="top"
            horizontalAlignment="right" margin="5" borderRadius="100">
            <Label class="text-align" fontSize="12" color="#ffffff" text="3"></Label>
        </StackLayout>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" (tap)="gotoMemberSearchPage()" row="0" col="1">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isMemberStatus ? '~/app/images/icon/member-dark.png':'~/app/images/icon/member-normal.png'"
            [tintColor]="isMemberStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isMemberStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.member"></Label>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" row="0" (tap)="gotoDonationPage()" col="2">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isDonationStatus ? '~/app/images/icon/charity-dark.png':'~/app/images/icon/charity-normal.png'"
            [tintColor]="isDonationStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isDonationStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.donation"></Label>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" row="0" (tap)="gotoEventsPage()" col="3">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isEventsStatus ? '~/app/images/icon/event-dark.png':'~/app/images/icon/event-normal.png'"
            [tintColor]="isEventsStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isEventsStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.events"></Label>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" row="0" (tap)="gotoSupportPage()" col="4">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isSupportStatus ? '~/app/images/icon/feedback-dark.png':'~/app/images/icon/feedback-normal.png'"
            [tintColor]="isSupportStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isSupportStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.support"></Label>
    </GridLayout>
    </Ripple>
    <Ripple class="button-bottom-layout" (tap)="gotoFamilyPage()" row="0" col="5">
    <GridLayout rows="auto,auto">
        <Image row="0" width="20" height="20" marginTop="10"
            [src]="isFamilyStatus ? '~/app/images/icon/family-dark.png':'~/app/images/icon/family-normal.png'"
            [tintColor]="isFamilyStatus ? '#af152d':'#d3d7da'"></Image>
        <Label row="1" paddingBottom="10" [color]="isFamilyStatus ? '#af152d':'#d3d7da'" fontSize="14"
            [text]="translateData?.family"></Label>
    </GridLayout>
    </Ripple>
    </GridLayout>

  1. Footer.component.ts：-

     import { Component,OnInit,Input,NgZone,ChangeDetectorRef } from "@angular/core";
 import { Page,isIOS } from "tns-core-modules/ui/page";
 import { RouterExtensions } from "nativescript-angular/router";
 import * as appSettings from "tns-core-modules/application-settings";


 @Component({
    selector: "Footer",moduleId: module.id,templateUrl: "./footer.component.html",styleUrls: ["./footer.component.css"]
 }) 
export class FooterComponent implements OnInit {

 @Input() translateData: any;
 @Input() isHomeStatus: boolean;
 @Input() isEventsStatus: boolean;
 @Input() isMemberStatus: boolean;
 @Input() isSupportStatus: boolean;
 @Input() isFamilyStatus: boolean;
 @Input() isDonationStatus: boolean;



 constructor(private page: Page,private zone: NgZone,private _ref: ChangeDetectorRef,private routerExtensions: RouterExtensions) {
 }

 ngOnInit(): void {
 }

}

  2. CSS：-

      .button-bottom-layout {
    width: "100%";
    border-right-width: "0.5";
    border-right-color: "#cfd8df";
    text-align: "center";
  }

  .text-align{
    vertical-align: "middle";
    text-align: "center";
    padding-top: "1";
  }
angularangularbadgemobile-applicationtabviewtabview