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>
    <ioThanks in advance!s>
      <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
    </ios>
</ActionBar>

请告诉我可以提供的任何其他信息，以使此问题更加清晰。

提前致谢！

Answer 1

选项1。）

该文档假设您已在资源文件夹中拥有图像ic_menu（适用于Android的 app / App_Resources / Android / drawables-xxx 和 app / App_Resources / iOS / Assets.xcassets ）。可以找到示例here

如果您没有此图像（针对不同设备进行缩放），则应提供该图像。这个概念与AppIcons（article here）的概念非常相似。还有一些工具可以自动生成不同比例的图像 - 例如this one here。

选项2。）

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

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

示例：

1。）Use this instead of image

2。）在文件夹字体example here
中导入图标字体
3。）创建一个CSS类

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

4。）应用你想要使用的字形的代码（在这种情况下是汉堡包菜单）

<Button text="" class="font-awesome" tap="" />

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

1 个答案: