Question

在我的申请中，我需要一个侧笔。起初我想过使用plugin from Telerik，其中包括一个侧面抽屉。但后来我发现here在Nativescript / Angular 2项目中使用这个插件是不可能的。然后我发现了Nativescript中允许使用iOS / Android原生小部件的placeholder。

所以对于侧面提款者，我认为我可以使用Android的Navigation drawer但是打字稿编译器（tsc）发给我一个错误，告诉我它没有识别名称＆＃39; android＆＃39 ; （请参阅有关占位符的链接）。

感谢您的帮助

Answer 1

以下是原生Android抽屉布局的基本实现，作为侧抽屉。

在你的page.xml中

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

在你的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;

这是一个非常基本的示例，没有过渡效果，也没有附加过任何风口监听器，但仍然可以使用滑动作为演示如何使用本机API在{N}中创建抽屉 - 希望这对您的项目有所帮助。

使用特定于移动操作系统的小部件

1 个答案: