Verwenden Sie mobile OS-spezifische Widgets

Question

In meiner Anwendung brauche ich eine Sidrawer. Zuerst dachte ich, ich benutze die plugin from Telerik, die einen Sidedrawer enthält. Aber dann habe ich herausgefunden, here war es nicht möglich, dieses Plugin in einem Nativescript/Angular 2-Projekt noch zu verwenden. Dann habe ich über die placeholder in Nativescript herausgefunden, die iOS/Android native Widgets verwenden können.

So für die Sidade Drawer, ich dachte, ich könnte die Navigation drawer von Android verwenden, aber der Typoskript-Compiler (TSC) sendet mir einen Fehler, mir zu sagen, dass es nicht den Namen "Android" erkennt (siehe Link über Platzhalter).

Vielen Dank für Ihre Hilfe

Answer 1

Hier ist eine grundlegende Implementierung des nativen Android-Fach-Layouts als Neben Schublade ist.

In Ihrem page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo"> 
    <Placeholder creatingView="creatingView"/> 
</Page> 

In Sie page.js

var app = require("application"); 
var drawer; 
var page; 
var appContext; 
function navigatingTo(args) { 
    page = args.object; 
    appContext = app.android.context; 
} 
exports.navigatingTo = navigatingTo; 

function creatingView(args) { 
    // init DrawerLayout 
    drawer = new android.support.v4.widget.DrawerLayout(appContext); 
    var frame = new android.widget.FrameLayout(appContext); 

    // here you can use ListView with Adapters if you prefer 
    var linearMenu = new android.widget.LinearLayout(appContext); 
    linearMenu.setOrientation(1); 

    // adding the menu options 
    var textView1 = new android.widget.TextView(appContext); 
    textView1.setText("ITEM 1"); 
    var textView2 = new android.widget.TextView(appContext); 
    textView2.setText("ITEM 2"); 
    var textView3 = new android.widget.TextView(appContext); 
    textView3.setText("ITEM 3"); 

    // setting layout params 
    var lp = new android.support.v4.widget.DrawerLayout.LayoutParams(100,  android.widget.LinearLayout.LayoutParams.MATCH_PARENT); 
    lp.gravity = android.view.Gravity.START; 

    linearMenu.setLayoutParams(lp); 
    linearMenu.addView(textView1); 
    linearMenu.addView(textView2); 
    linearMenu.addView(textView3); 

    // finally adding the elements to the DrawerLayout and attaching it to the NativeScript placeholder 
    drawer.addView(frame, new android.support.v4.widget.DrawerLayout.LayoutParams(android.view.ViewGroup.Layou tParams.MATCH_PARENT, android.view.ViewGroup.LayoutParams.MATCH_PARENT)); 
    drawer.addView(linearMenu); 
    args.view = drawer; 
} 
exports.creatingView = creatingView; 

Dies ist ein sehr einfaches Beispiel ohne Übergangseffekte und keine Lüftungs Hörer angebracht wird aber nach wie vor mit Swipe arbeiten als eine Demonstration, wie man die nativen APIs verwendet, um eine Schublade in {N} zu erstellen - hoffe, das hilft dir in deinem Projekt.