1

我在实现共享 SideDrawer 时遇到问题。我正在关注这篇文章https://www.nativescript.org/blog/a-deep-dive-into-telerik-ui-for-nativescripts-sidedrawer

主页 XML：

<Page 
  xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:sd="nativescript-telerik-ui/sidedrawer" loaded="pageLoaded">
  <Page.actionBar>
    <ActionBar class="action-bar" title="Manu">
      <android>
        <NavigationButton icon="res://ic_menu" tap="toggleDrawer" />
      </android>
      <ios>
        <ActionItem icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
      </ios>
    </ActionBar>
  </Page.actionBar>
  <sd:RadSideDrawer id="sideDrawer">
    <sd:RadSideDrawer.drawerContent 
      xmlns:Drawer="Views/SideDrawerView">
      <Drawer:SideDrawerView />
    </sd:RadSideDrawer.drawerContent>
  </sd:RadSideDrawer>
  <StackLayout>
    <Label text="{{ sync }}" />
  </StackLayout>
</Page>

主页代码隐藏：

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { MainViewModel } from '../../ViewModels/MainViewModel';

let frameModule = require("ui/frame");
let view = require("ui/core/view");
let page: Page;

export function pageLoaded(args: EventData) {
    page = <Page>args.object;
    page.bindingContext = new MainViewModel();    
}

export function toggleDrawer () {
    let drawer: any = view.getViewById(page, "sideDrawer");
    drawer.toggleDrawerState();
};

SideDrawer XML：

<StackLayout class="sidedrawer-left" loaded="drawerViewLoaded">
    <StackLayout class="sidedrawer-header">
        <Label text="Hello RadSideDrawer!" class="sidedrawer-header-brand" />
    </StackLayout>
    <StackLayout class="sidedrawer-content">
        <Label text="QrScanner" class="sidedrawer-list-item-text" tap="qrScan" />
        <Label text="New Item" class="sidedrawer-list-item-text" tap="nItem" />
        <Label text="Edit Item" class="sidedrawer-list-item-text" tap="eItem" />
        <Label text="Users" class="sidedrawer-list-item-text" tap="openUsers" />
        <Label text="Map" class="sidedrawer-list-item-text" tap="map" />
    </StackLayout>
</StackLayout>

所以，当我实际点击并调用 toggleDrawer 函数时

export function toggleDrawer () {
    let drawer: any = view.getViewById(page, "sideDrawer");
    drawer.toggleDrawerState();
};

它说抽屉未定义。有什么问题？

4

2 回答 2

1

试试这种方式:) 因为你有点击事件，你可以在里面toggleDrawer和从args获取点击的对象中获取点击事件数据page，你可以从那里访问sideDrawer控制或使用frameModule的topmost()功能

export function toggleDrawer (args: EventData) {
    //this way
    let page = <Page>(<any>args.object).page;
    //or this way
    let page = frameModule.topmost();
    //at last get drawer content at page
    let drawer: any = page.getViewById("sideDrawer");
    drawer.toggleDrawerState();
};
于 2017-01-30T12:50:32.830 回答
0

我通过在 Page 元素中声明自定义组件而不是 sd:RadSideDrawer.drawerContent 解决了这个问题。

<Page 
  xmlns="http://schemas.nativescript.org/tns.xsd" 
  xmlns:sd="nativescript-telerik-ui/sidedrawer" 
  xmlns:Drawer="Views/SideDrawerView" loaded="pageLoaded">
于 2017-01-30T13:01:57.207 回答