Nativescript - 在按钮单击时打开 SideDrawer

Posted 2023-04-13

【中文标题】Nativescript - 在按钮单击时打开 SideDrawer

【英文标题】：Nativescript -Open SideDrawer on button click

【发布时间】：2016-09-01 08:51:03

【问题描述】：

我正在使用 Telerik ui 编写本机脚本。我需要顶部的切换按钮来打开侧面菜单。但我无法按照文档调用Showdrawer()。 我需要的是按钮单击侧菜单应该打开。我试着打电话给RadSideDrawer.prototype.showDrawer()，但失败了。 Nativescript 有其他可用的侧边菜单吗？

主页.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>

getting-started-model.js

var observableModule = require("data/observable");
var GettingStartedViewModel = (function (_super) 
    __extends(GettingStartedViewModel, _super);
    function GettingStartedViewModel() 
        _super.call(this);
        this.set("mainContentText", "SideDrawer for NativeScript can be easily setup in the XML definition of your page by defining main- and drawer-content. The component"
            + " has a default transition and position and also exposes notifications related to changes in its state.");

    
    return GettingStartedViewModel;
)(observableModule.Observable);
exports.GettingStartedViewModel = GettingStartedViewModel;
function showSideDrawer(args) 
    console.log("Show SideDrawer tapped.");
    // Show sidedrawer ...
   _super.prototype.showDrawer.call(this);


exports.showSideDrawer = showSideDrawer;

主页.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;

【参考方案1】：

您可以查看this SDK examples，它显示了 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"));

并调用它的showDrawer() 方法：

sideDrawer.showDrawer();

【讨论】：

我没有使用专业版，我不知道导入是否适用于打字稿并且正在使用 javascript.anyhow 这个答案似乎是正确的，但作为初学者调试错误似乎对我来说很麻烦.尝试了您的代码，我的方式出现了“需要”错误。

您好，如果 require() 给您错误，请确保 N 应用程序中存在所有必需的 js 库。更多信息可以找到here。关于专业版，使用非专业版时只需将require更改为require("nativescript-telerik-ui/sidedrawer")

调用sideDrawer.showDrawer()时；它说显示抽屉不是功能。当我尝试 sideDrawer.RadSideDrawer.prototype.showDrawer();没有错误发生，但什么也没有发生。

@NithinC 看起来您没有检索 SideDrawer 的实例，这意味着它是未定义的。您可以尝试通过frameModule.topmost().getViewById(--element id--) 检索不同的元素吗？如果页面中存在这样的元素，则调用 getViewById 应该检索正确的元素。

【参考方案2】：

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

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

也许您可以尝试给 sideDrawer 一个 Id 并使用此代码。

var drawer = frameModule.topmost().getViewById("sideDrawer");
drawer.showDrawer();

【讨论】：

我正在使用 - docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/…。

在 main-page.js 你需要("./getting-started-model") 并且你的页面被命名为main-page-model。这会导致故障吗？

抱歉，打错字了。看起来不是问题

【参考方案3】：

你得到undefined，因为没有为抽屉分配id，所以为了解决你的问题，给sideDrawer分配一个id<drawer:RadSideDrawer id="sideDrawer">然后你可以打电话

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

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

【参考方案4】：

在我的情况下，我错过了插入，因此，在调用 toggleDrawer 时缺少一个组件，因此出现错误“TypeError: Cannot read property 'toggleDrawerState' of undefined”。

尝试在其中插入 xml 文件的所有 body 组件可能会解决问题。

编码愉快:))