0

NativeScriptでサイドメニューの一種を作りたいのですが、方法がわかりません。NativeScript でナビゲーション ドロワーを作成する方法は? これを行うことができるモジュールはありますか?

4

7 に答える 7

2

今のところドロワーはありませんが、動作中です。

それまでの間、NativeScript の公式リポジトリを確認できます。 https://github.com/NativeScript/NativeScript/tree/master/apps/TelerikNEXT

TelerikNext アプリを確認してください。

于 2015-04-07T11:13:31.483 に答える
0

これを確認してください: https://www.nativescript.org/blog/using-cross-platform-native-siderawer-component-in-nativescript

RadSideDrawer コンポーネントが追加されました http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/SideDrawer/overview

お役に立てれば！

于 2017-01-11T16:31:45.597 に答える
0

作業コードをアップロードしています。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
]
于 2016-11-23T11:17:08.553 に答える
0

まだ利用可能ではないと思います。独自のモジュールをビューとして作成し、独自のナビゲーション (開く、閉じる) を行う必要があると思います。

ただし、箱から出してすぐに、ドキュメントに他に何も見つかりませんでした。

私が試したもう1つのことは、ヘッダーにボタンを追加することですが、それでもヘッダーの色を変更することしかできなかったので、これらの単純なことを行うにはもう少し待つ必要があると思います.

参照 : Buxferと NativeScriptに基づいてデモ アプリを開発しています。

ソースコード: https://github.com/chehabz/Buxfer-NativeScript

于 2015-04-05T06:54:05.157 に答える