如何使用nativescript在操作栏中创建通知图标？

Question

我是Angular的NativeScript新手，我想在操作栏中创建一个通知图标。下面是我的欲望位置和图标的外观。

通过学习以下游乐场项目中的示例，我已经成功地做出了同样的立场。

Project ref#

但我的输出是这样的：

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

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>

dashboard.component.scss

.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;
}

Answer 1

不幸的是，对于那种操作栏（左侧有2个按钮，右侧有2个按钮），您需要构建自己的操作栏，但是您处于正确的路径中。

你需要做的是：

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

我希望这对你有所帮助：D