Блог

Привет, люди!

Я пытаюсь добавить значок меню гамбургера на панель действий в моем приложении Nativescript, который запускал бы боковой ящик, но я не могу добавить этот значок меню.

Это официальная документация по этому вопросу;

И это мой .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>
  

Пожалуйста, сообщите мне любую дополнительную информацию, которую я мог бы предоставить, чтобы прояснить эту проблему.

Вариант 1.)

В документации предполагается, что у вас уже есть изображение ic_menu в ваших папках ресурсов (app / App_Resources/ Android / drawables-xxx для Android и app / App_Resources/iOS/Assets.xcassets). Пример можно найти здесь

Если у вас нет этого изображения (масштабируемого для разных устройств), вы должны предоставить его. Концепция практически такая же, как и для AppIcons (статья здесь). Существуют также инструменты для автоматической генерации изображений с разными масштабами — например, вот этот.

Вариант 2.)

Примечание: это будет работать только с синтаксисом пользовательских элементов ActionItems

Другой применимый вариант — создать меню для гамбургеров с помощью шрифтов значков вместо изображений (которые должны быть точно изменены для разных разрешений)

Пример:

1.) Используйте это вместо изображения

2.) Импортируйте шрифт значка в folder fonts пример здесь

3.) Создайте класс CSS

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

4.) Примените код для глифа, который вы хотите использовать (в данном случае меню гамбургера)

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