我在实现共享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();
};
它说抽屉未定义。可能有什么不对?
答案 0 :(得分:1)
尝试这种方式:)因为您有点击事件,您可以在toggleDrawer
和args
内点击事件数据获取点击对象的page
,您可以从中访问sideDrawer
控制或使用frameModule
的{{1}}功能
topmost()
答案 1 :(得分: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">