如何使用原生脚本在actionbar中制作通知图标？
如何使用原生脚本在actionbar中制作通知图标？
提问于 2019-02-20 03:55:31
我是一个使用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="" class="fa ah-bell"></Label>
</StackLayout>
<Label col="1" row="0" text="" 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=""></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;
}回答 1
Stack Overflow用户
发布于 2019-02-20 04:22:43
不幸的是，对于那种操作栏(左侧2个按钮，右侧2个按钮)，您需要构建自己的操作栏，但您在正确的路径上。
您需要做的是：
- 隐藏该页面的操作栏。
- 创建一个ActionBar组件，其中您的主布局是GridLayout (我认为此布局非常适合这种情况，但我可能会错笑)，您可以重复使用已有的代码。
- 处理每个按钮的事件。
- 在页面中使用新的ActionBar组件，并向其传递要显示的数据。
<代码>F29
我希望这能对你有所帮助：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54773998
复制相关文章
相似问题