toggleDrawerState 与 Nativescript-telerik-ui 滑动抽屉答案

【问题标题】：toggleDrawerState with Nativescript-telerik-ui slide drawertoggleDrawerState 与 Nativescript-telerik-ui 滑动抽屉
【发布时间】：2017-01-07 08:17:20
【问题描述】：

我正在使用最新版本的 Telerik-Nativescript-UI（1.3.1 版）。此更新版本应该支持操作栏重叠。我正在使用here 显示的示例重新工作我现有的抽屉实现。我遇到的问题是我曾经功能齐全的切换抽屉按钮在更新后不再起作用。我正在尝试调用 toggleDrawerState() 来处理这个问题，但是当我尝试获取对抽屉的引用时它失败了。我的另一个问题是抽屉内容不再从我的小部件目录加载这是我下面的代码示例

XML 视图

  <dpg:DrawerPage
    navigatedTo="onNavigatedTo"
    navigatingTo="navigatingTo"  
    xmlns:dpg="nativescript-telerik-ui/sidedrawer/drawerpage"
    xmlns:drawer="nativescript-telerik-ui/sidedrawer"
    xmlns:widgets="shared/widgets"
    xmlns="http://www.nativescript.org/tns.xsd">

  <page.actionBar>
    <action-bar title="{{L('connections')}}">
      <!--<NavigationButton  icon="res://back" tap="goBack" ios:visibility="collapsed" />      -->
      <NavigationButton  icon="res://menu" tap="toggleDrawer" ios:visibility="collapsed" />
      <action-bar.actionItems>
        <ios>
          <action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
        </ios>
      </action-bar.actionItems>
    </action-bar>
  </page.actionBar>

  <dpg:DrawerPage.sideDrawer id="">
    <drawer:RadSideDrawer id="drawer">
      <drawer:RadSideDrawer.drawerContent>
        <widgets:drawer-content />
      </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer> 
  </dpg:DrawerPage.sideDrawer>

    <StackLayout cssClass="mainContent">
        <Label text="test test test" textWrap="true" cssClass="drawerContentText"/>

    </StackLayout>
</dpg:DrawerPage>

我尝试切换抽屉的 JS

SideDrawer.prototype.toggleDrawer = function() {
  var page = topmost().currentPage;
  page.getViewById("drawer").toggleDrawerState();
};

显然试图通过将 ID 附加到 the<drawer:RadSideDrawer id="drawer"> 来访问抽屉是不正确的，希望有人能指出我正确的方向。

【问题讨论】：

您可以查看此示例中的代码 - github.com/telerik/nativescript-ui-samples/tree/release/sdk/app/…，其中显示了如何使用 ActionBar 重叠功能
@NikolayTsonev 我有，但它没有显示如何正确使用 toggleDrawerStateMethod。根据我上面的代码，我不明白为什么我当前的切换功能实现不起作用。我需要以其他方式访问抽屉吗？

标签： javascript telerik nativescript nativescript-telerik-ui

【解决方案1】：

在您使用 RadSideDrawer 的“在 ActionBar 上显示”功能的场景中，您不再将 RadSideDrawer 添加到页面的 content 而是添加到自定义 DrawerPage 的属性中，这就是为什么您不能再使用 Page 的.getViewById() 方法。在这种情况下，您可以简单地将 Page 转换为 DrawerPage 并直接使用其 sideDrawer 属性，该属性是 XML 中声明的 RadSideDrawer。比如这样：

SideDrawer.prototype.toggleDrawer = function() {
  var page = topmost().currentPage;
  page.sideDrawer.toggleDrawerState();
};

【讨论】：