使用 NativeScript 的导航抽屉

Question

我想用 NativeScript 创建一种侧边菜单，但我不知道怎么做。如何使用 NativeScript 创建导航抽屉？是否存在可以执行此操作的任何模块？

Answer 1

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

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

我尝试的另一件事是在页眉中添加一个按钮，但我仍然只设法更改页眉的颜色，所以我认为您需要再等一段时间才能完成这些简单的操作。

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

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

Answer 2

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

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

检查 TelerikNext 应用程序。

Answer 3

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

详情可参考this doc

Answer 4

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

Answer 5

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

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

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

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

Answer 6

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

drawer.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";

并在声明数组中添加 SIDEDRAWER_DIRECTIVES:

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

Answer 7

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

They now have the RadSideDrawer component http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/SideDrawer/overview

希望对您有所帮助！

使用 NativeScript 的导航抽屉

Navigation Drawer with NativeScript

nativescript