Question

我想用NativeScript创建一种sidemenu，但我不知道怎么做。如何使用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

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

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

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

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

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

Answer 5

我正在上传我的工作代码。它在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 6

请检查：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

希望这有帮助！

使用NativeScript导航抽屉

6 个答案: