如何在Nativescript中将按钮图标添加到ActionBar

Question

大家好

我正试图在Nativescript应用程序的ActionBar中添加一个汉堡菜单图标，该图标会触发一个侧抽屉，但我无法添加该菜单图标。

这是关于此事的官方文件；

到目前为止，这是我的.xml代码：

<dpg:DrawerPage loaded="pageLoaded" navigatedTo="onNavigatingTo"  
xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
xmlns:drawer="nativescript-telerik-ui/sidedrawer"
xmlns:sdc="views/side-drawer-content"
xmlns="http://www.nativescript.org/tns.xsd">
<navigation.actionBar>
  <ActionBar title="Drawer Over Navigation">
    <android>
      <NavigationButton icon="res://ic_menu" tap="toggleDrawer" />
    </android>
    <ios>
      <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
    </ios>
  </ActionBar>
</navigation.actionBar>
<dpg:DrawerPage.sideDrawer>
<drawer:RadSideDrawer id="drawer">
  <drawer:RadSideDrawer.drawerContent>
    <sdc:side-drawer-content />
  </drawer:RadSideDrawer.drawerContent>
</drawer:RadSideDrawer> 
</dpg:DrawerPage.sideDrawer>
<StackLayout cssClass="mainContent">
    <Label text="{{ exampleText }}" textWrap="true" cssClass="drawerContentText"/>
    <Button text="Toggle Drawer" tap="toggleDrawer" icon="res://ic_menu" />
</StackLayout>
</dpg:DrawerPage>

我认为相关的部分在这里，但我看不出我的错误是什么。

<ActionBar title="Drawer Over Navigation">
    <android>
      <NavigationButton icon="res://ic_menu" tap="toggleDrawer" />
    </android>
    <ios>
      <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
    </ios>
</ActionBar>

请告诉我我能提供的任何其他信息，以使这个问题更清楚。

Answer 1

选项1。(

该文档假设您的资源文件夹中已经有图像ic_menu(app/app_resources/Android/drawables-xxx适用于Android和app/app-resources/iOS/Assets.xcassets(。示例可在此处找到

如果你没有这个图像(根据不同的设备缩放(，那么你应该提供它。这个概念与你为AppIcons所做的基本相同(文章在这里(。还有一些工具可以自动生成不同比例的图像，比如这里的这个。

选项2。(

注意：这只适用于自定义ActionItems 的语法

另一个适用的选项是用IconFonts而不是图像创建汉堡菜单(必须根据不同的分辨率精确调整大小(

示例：

1.(使用此替代图像

2.(在此处导入文件夹字体示例中的图标字体

3.(创建一个CSS类

.font-awesome {
    font-family: "FontAwesome";
    font-size: 14;
    font-weight: normal;
    text-align: center;
}

4.(为你想要使用的字形(在这种情况下是汉堡菜单(应用代码

<Button text="&#xf0c9;" class="font-awesome" tap="" />