如何使用nativescript在actionbar中创建通知图标？

我不熟悉使用Angular的NativeScript，我想在操作栏中创建一个通知图标。下面是我想要的一个图标的位置和外观

通过在下面的游乐场项目中学习示例，我成功地获得了相同的职位

但我的输出是这样的：

有一个钟形字体图标没有显示在那里。我已经用矩形背景色突出显示了它的位置，因此很容易理解我想要这个图标的位置。另一个点标签显示在正确的位置。但我无法在点图标之前显示通知铃图标。下面是我的代码，请告诉我我在代码中做错了什么，以及如何在点标签前显示我的通知钟形图标

dashboard.component.html

<ActionBar class="action-bar" flat="true">
    <!-- 
    Use the NavigationButton as a side-drawer button in Android
    because ActionItems are shown on the right side of the ActionBar
    -->
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <!-- 
    Use the ActionItem for IOS with position set to left. Using the
    NavigationButton as a side-drawer button in iOS is not possible,
    because its function is to always navigate back in the application.
    -->
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
        ios.position="left">
    </ActionItem>
    <GridLayout width="100%" rows="auto" columns="*,50,auto">
        <Label col="0" row="0" class="action-bar-title" text="Dashboard"></Label>
        <StackLayout col="1" row="0" rowSpan="2" class="ah-notification" backgroundColor="#44557f">
            <Label text="&#xf0f3;" class="fa ah-bell"></Label>
        </StackLayout>
        <Label col="1" row="0" text="&#xf192;" class="fa ah-dot"></Label>
        <!-- <Image col="1" row="0" horizontalAlignment="right" marginRight="10" class="status-img" src="res://chat"></Image> -->
        <Image col="2" row="0" horizontalAlignment="right" marginRight="10" class="status-profile" src="res://chat"></Image>
    </GridLayout>

</ActionBar>

<GridLayout class="page page-content">
    <Label class="page-icon fa" text="&#xf015;"></Label>
    <Label class="page-placeholder" text="<!-- Page content goes here -->"></Label>
</GridLayout>

---

不幸的是，对于这种类型的操作栏（左侧2个按钮，右侧2个按钮），您需要构建自己的操作栏，但您走的是正确的道路

您需要做的是：

• 隐藏该页面的操作栏
• 创建一个ActionBar组件，其中您的主布局是GridLayout（我认为这个布局非常适合这种情况，但我可能错了，lol），您可以重用已经拥有的代码
• 处理每个按钮的事件
• 在页面中使用新的ActionBar组件，并将要显示的数据传递给它

我希望这能对你有所帮助

.ah-notification {
    width: 30;
    height: 30;

    .ah-bell {
        width: 30;
        height: 30;
        border-radius: 6;
        stretch: aspectFill;
        font-size: 15px;
        // margin-top: -10;
    }
}
.ah-dot {
    width: 12;
    height: 12;
    background-color: #49494b;
    border-width: 2;
    border-radius: 25;
    border-color: #49494b;
    vertical-align: top;
    horizontal-align: center;
    margin-top: 43;
    z-index: 21 // margin-left: -50;
}