用NativeScript导航抽屉

Question

我想用NativeScript创建一种类型的sidemenu，但我不知道如何。 如何使用NativeScript创建导航抽屉？ 存在任何模块什么可以做到这一点？

Answer 1

没有抽屉现在，但它是在工作AFAIK。

同时，您可以检查NativeScript的官方回购。 https://github.com/NativeScript/NativeScript/tree/master/apps/TelerikNEXT

检查TelerikNext应用程序。

Answer 2

我认为它不可用我认为你需要创建自己的模块作为一个视图，并做自己的导航（打开，关闭）。

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

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

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

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

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

或者从伊格纳西奥·富恩特斯同一模板的打字稿版本...

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

Answer 6

我上传我的工作代码。这是Nativescript +角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进口。

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

并在声明数组添加SIDEDRAWER_DIRECTIVES：下面TS

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

希望这可以帮助！