如何在 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 for Android 和 app/App_Resources/iOS/Assets.xcassets)。可以找到示例 here

如果您没有这张图片（针对不同的设备进行了缩放），那么您应该提供它。这个概念与您为 AppIcons 所做的几乎相同 (article here). There are also tools for automatic generation of images with different scales - for example this one here.

选项 2.)

注意：这仅适用于the syntax for custom ActionItems

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

示例：

1.) Use this instead of image

2.) 在fonts文件夹中导入图标字体example here

3.) 创建一个 CSS class

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

4.) 应用您要使用的字形代码（在本例中为汉堡菜单）

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

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

How to add button icons to ActionBar in Nativescript?

xml

android

telerik

nativescript