Nativescript-单击按钮打开侧抽屉

我使用telerik用户界面来编写本机脚本。我需要一个切换按钮在顶部打开侧菜单。但是我无法根据文档调用

Showdrawer（）

。 我需要的是在按钮点击侧菜单应该打开。我尝试调用

RadSideDrawer.prototype.showDrawer（）

，但失败了。 对于

Nativescript

，是否还有其他侧菜单可用

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:drawer="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded">
    <Page.actionBar>
        <ActionBar>
            <android>
                <NavigationButton text="Go Back" android.systemIcon="ic_menu_moreoverflow" tap="showSideDrawer" />
            </android>
        </ActionBar>
    </Page.actionBar>
    <drawer:RadSideDrawer>
        <drawer:RadSideDrawer.mainContent>
            <StackLayout>
                <Label text="{{ mainContentText }}" textWrap="true" />
            </StackLayout>
        </drawer:RadSideDrawer.mainContent>
        <drawer:RadSideDrawer.drawerContent>
            <StackLayout cssClass="drawerContent" style="background-color:white;">
                <StackLayout cssClass="headerContent">
                    <Label text="Header" />
                </StackLayout>
                <StackLayout cssClass="drawerMenuContent">
                    <Label text="Item 1" style="color:black;" />
                    <Label text="Item 2" style="color:black;" />
                    <Label text="Item 3" style="color:black;" />
                    <Label text="Item 4" style="color:black;" />
                </StackLayout>
            </StackLayout>
        </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer>
</Page>

主页.js

var viewModelModule = require("./getting-started-model");
function pageLoaded(args) {
    console.log("Page loaded");
    var page = args.object;
    page.bindingContext = new viewModelModule.GettingStartedViewModel();
}
exports.pageLoaded = pageLoaded;

---

您是否从未发布的代码调用showSideDrawer函数？你确定你链接了点击按钮吗

<Button tap="showSideDrawer" text="ToggleDrawer"/>

你可以看一下RadSideDrawer的主要功能。正如@R Pelzer所提到的，您所需要做的就是使用RadSideDrawer的id获取该实例：

import drawerModule = require("nativescript-telerik-ui-pro/sidedrawer");
import frameModule = require("ui/frame");

var sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(frameModule.topmost().getViewById("sideDrawer"));

---

您将获得未定义的

，因为没有为抽屉分配id，因此要解决您的问题，请为侧抽屉分配id

，然后您可以调用

var frame = require('ui/frame');
var drawer = frame.topmost().getViewById("sideDrawer");

function showSideDrawer(){
drawer.showDrawer();  // i prefer using .toggleDrawerState();
};

---

在我的例子中，我没有插入，因此，在调用toggleDrawer时缺少一个组件，因此出现错误“TypeError:无法读取未定义的属性'ToggleDrawersState'

尝试将xml文件的所有主体组件都插入其中，这可能会解决此问题

---

快乐编码：）

am使用-。在main-page.js中，您需要（“./getting started model”），您的页面被命名为主页模型。这可能会导致错误？抱歉，这是一个输入错误。这不是问题。我没有使用专业版，我不知道我是否正确导入与typescript一起工作，我使用javascript。无论如何，这个答案似乎是正确的，但作为一个初学者，调试错误似乎对我来说很麻烦。我尝试了你的代码，并且“require”错误出现了。嗨，如果

require（）

出现错误，请确保{N}应用程序中存在所有必需的js库。可以找到更多信息。关于专业版，在使用非专业版时，只需在调用sidedrawer.showDrawer（）时将

require

更改为

require（“nativescript telerik ui/sidedrawer”）

；它说show drawer不是一个功能。当我尝试sideDrawer.RadSideDrawer.prototype.showDrawer（）时；没有错误发生，但什么也没有发生。@NithinC看起来您没有检索SideDrawer的实例，这意味着它是未定义的。您是否可以尝试通过

frameModule.topmost（）.getViewById（--element id-）

检索其他元素。如果页面中存在这样的元素，那么调用getViewById应该检索到正确的元素。

import drawerModule = require("nativescript-telerik-ui-pro/sidedrawer");
import frameModule = require("ui/frame");

var sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(frameModule.topmost().getViewById("sideDrawer"));

sideDrawer.showDrawer();

var frame = require('ui/frame');
var drawer = frame.topmost().getViewById("sideDrawer");

function showSideDrawer(){
drawer.showDrawer();  // i prefer using .toggleDrawerState();
};