使用 NativeScript 的导航抽屉

Question

我想用 NativeScript 创建一种侧边菜单，但我不知道怎么做。 如何使用 NativeScript 创建导航抽屉？ 存在任何模块什么可以做到这一点？

Answer 1

目前没有抽屉，但它在工作的 AFAIK 中。

同时，您可以查看 NativeScript 的官方仓库。 https://github.com/NativeScript/NativeScript/tree/master/apps/TelerikNEXT

检查 TelerikNext 应用程序。

Answer 2

Telerik 今天宣布将Telerik UI for Nativescript 作为插件。 该插件现在包含侧抽屉和数据可视化工具。这是一款商业产品，但（仅）里面的侧抽屉功能是免费的。

您可以参考this doc了解详细信息。

Answer 3

抽屉在这里。查看 TJ Vantoll 的样板项目以帮助您入门...

https://github.com/tjvantoll/nativescript-template-drawer

或者来自 Ignacio Fuentes 的同一模板的 TypeScript 版本...

https://github.com/ignaciofuentes/nativescript-template-drawer-ts

Answer 4

以下是如何使用 NativeScript 1.3（添加了动画框架）创建动画抽屉菜单的示例：https://github.com/emiloberg/nativescript-animated-sidebar-menu-example

Answer 5

我认为它尚不可用我认为您需要创建自己的模块作为视图并进行自己的导航（打开、关闭）。

但是开箱即用，我没有在他们的文档中找到任何其他内容。

我尝试的另一件事是在标题中添加一个按钮，但我仍然只能更改标题的颜色，所以我认为您需要再等一些时间来做这些简单的事情。

参考：我正在开发一个基于 Buxfer 和 NativeScript 的演示应用程序。

源代码：https://github.com/chehabz/Buxfer-NativeScript

Answer 6

我正在上传我的工作代码。它在 Nativescript + Angular 2 中

抽屉.html

<RadSideDrawer [drawerLocation]="currentLocation" [transition]="sideDrawerTransition"tkExampleTitle tkToggleNavButton>
<StackLayout tkDrawerContent class="sideStackLayout">
    <StackLayout class="sideTitleStackLayout">
        <Label text="Navigation Menu"></Label>
    </StackLayout>
    <StackLayout class="sideStackLayout">
        <Label text="Primary" class="sideLabel sideLightGrayLabel"></Label>
        <Label text="Social" class="sideLabel"></Label>
        <Label text="Promotions" class="sideLabel"></Label>
        <Label text="Labels" class="sideLabel sideLightGrayLabel"></Label>
        <Label text="Important" class="sideLabel"></Label>
        <Label text="Starred" class="sideLabel"></Label>
        <Label text="Sent Mail" class="sideLabel"></Label>
        <Label text="Drafts" class="sideLabel"></Label>
    </StackLayout>
</StackLayout>
<StackLayout tkMainContent>
    <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
    <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
</StackLayout>

drawer.component.ts

import {Component , OnInit, Input,ElementRef, ViewChild,ChangeDetectionStrategy,ChangeDetectorRef} from "@angular/core";
import { Router } from "@angular/router";
import { Page } from "ui/page";
import {View} from "ui/core/view";
import {Label} from "ui/label";
import {RadSideDrawerComponent, SideDrawerType} from 'nativescript-telerik-ui/sidedrawer/angular';
import {DrawerTransitionBase, SlideInOnTopTransition} from 'nativescript-telerik-ui/sidedrawer';
import * as sideDrawerModule from 'nativescript-telerik-ui/sidedrawer/';

@Component({
   selector: "hello",
   templateUrl: "shared/hello/app.hello.html",
   styleUrls: ["shared/hello/hello.css", "css/app-common.css"],
})
export class HelloComponent implements OnInit{

private _currentNotification: string;
private _sideDrawerTransition: sideDrawerModule.DrawerTransitionBase;

constructor(private _page: Page, private _changeDetectionRef: ChangeDetectorRef) {
    this._page.on("loaded", this.onLoaded, this);
}

@ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
private drawer: SideDrawerType;

ngAfterViewInit() {
    this.drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();
}

ngOnInit() {

}

public onLoaded(args) {
    this._sideDrawerTransition = new sideDrawerModule.PushTransition();
}

public get sideDrawerTransition(): sideDrawerModule.DrawerTransitionBase {
    return this._sideDrawerTransition;
}

public get currentNotification(): string {
    return this._currentNotification;
}

public openDrawer() {
    console.log("openDrawer");
    this.drawer.showDrawer();
}

public onDrawerOpening() {
    console.log("Drawer opening");
    this._currentNotification = "Drawer opening";
}

public onDrawerOpened() {
    console.log("Drawer opened");
    this._currentNotification = "Drawer opened";
}

public onDrawerClosing() {
    console.log("Drawer closing");
    this._currentNotification = "Drawer closing";
}

public onDrawerClosed() {
    console.log("Drawer closed");
    this._currentNotification = "Drawer closed";
}
}

别忘了在下面的 app.module.ts 中全局导入：

import { SIDEDRAWER_DIRECTIVES } from "nativescript-telerik-ui/sidedrawer/angular";

并在声明数组中添加 SIEDRAWER_DIRECTIVES：

declarations: [
SIDEDRAWER_DIRECTIVES,
AppComponent,
...navigatableComponents
]

Answer 7

检查这个：https://www.nativescript.org/blog/using-cross-platform-native-sidedrawer-component-in-nativescript

他们现在有了 RadSideDrawer 组件 http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/SideDrawer/overview

希望这会有所帮助！