NativeScript - 找不到元素'Sidedrawer'的模块'ui/sidedrawer'

Question

因此，我在NativeScript中为此应用程序在此tutorial之后创建了一个简单的侧边抽屉菜单。 我可以使用下面的代码使它适用于任何给定的单页面。

starting_point.xml：

<Page xmlns:sd="nativescript-telerik-ui/sidedrawer" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo"> 

    <ActionBar title="Geminid Systems" class="action-bar"> 
     <ActionItem tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" /> 
    </ActionBar> 

    <sd:RadSideDrawer id="sideDrawer" drawerLocation="Left"> 
     <sd:RadSideDrawer.drawerContent> 
      <StackLayout class="sidedrawer-left"> 
      <StackLayout class="sidedrawer-header"> 
       <Label text="Geminid Systems" class="sidedrawer-header-brand" /> 
      </StackLayout> 
      <StackLayout class="sidedrawer-content hamburgerMenu"> 
       <Label text="Home" class="sidedrawer-list-item-text" /> 
       <Label text="Accounts" class="sidedrawer-list-item-text" /> 
       <Label text="Calendar" class="sidedrawer-list-item-text" /> 
       <Label text="Activity" class="sidedrawer-list-item-text" /> 
       <Label text="Advanced" class="sidedrawer-list-item-text" /> 
       <Label text="Online " class="sidedrawer-list-item-text" /> 
      </StackLayout> 
     </StackLayout> 

     </sd:RadSideDrawer.drawerContent> 

     <sd:RadSideDrawer.mainContent> 
      <StackLayout>  
       <Button text="Toggle Drawer" class="btn" tap="toggleDrawer" /> 

      </StackLayout> 
     </sd:RadSideDrawer.mainContent> 
    </sd:RadSideDrawer> 

</Page> 

starting_point.js：

var drawer; 

exports.toggleDrawer = function() { 
    drawer.showDrawer(); 
}; 
exports.onNavigatedTo = function (args) { 
    var page = args.object; 
    drawer = page.getViewById("sideDrawer"); 
}; 

这工作绝对没问题。
当我尝试模块化并将侧抽屉代码移动到shared文件夹时，出现问题，因此我不必在需要抽屉的所有页面中反复重复代码。
所以，我没有这样的：

项目结构：

. 
├── app 
| └── shared 
|  └── sidedrawer.xml 
|  └── sidedrawer.js 
| ├── app.css 
| ├── app.js 
| ├── starting_point.xml 

starting_point.xml：

<Page xmlns:sd="nativescript-telerik-ui/sidedrawer" xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="onNavigatedTo"> 

    <ActionBar title="Geminid Systems" class="action-bar"> 
     <ActionItem tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" /> 
    </ActionBar> 

    <sd:RadSideDrawer id="sideDrawer" drawerLocation="Left"> 
     <sd:RadSideDrawer.drawerContent> 

       <shared:sidedrawer /> <!-- CHANGE - Moved the content inside RadSideDrawer.drawerContent to shared/sidedrawer.xml for reusability and removed JS code from starting_point.js and put it in shared/sidedrawer.js --> 

     </sd:RadSideDrawer.drawerContent> 

     <sd:RadSideDrawer.mainContent> 
      <StackLayout>  
       <Button text="Toggle Drawer" class="btn" tap="toggleDrawer" /> 

      </StackLayout> 
     </sd:RadSideDrawer.mainContent> 
    </sd:RadSideDrawer> 
</Page> 

共享/ sidedrawer.xml

<StackLayout class="sidedrawer-left"> 
    <StackLayout class="sidedrawer-header"> 
    <Label text="Geminid Systems" class="sidedrawer-header-brand" /> 
    </StackLayout> 
    <StackLayout class="sidedrawer-content hamburgerMenu"> 
    <Label text="Home" class="sidedrawer-list-item-text" /> 
    <Label text="Accounts" class="sidedrawer-list-item-text" /> 
    <Label text="Calendar" class="sidedrawer-list-item-text" /> 
    <Label text="Activity" class="sidedrawer-list-item-text" /> 
    <Label text="Advanced" class="sidedrawer-list-item-text" /> 
    <Label text="Online " class="sidedrawer-list-item-text" /> 
    </StackLayout> 
</StackLayout> 

共享/ sidedrawer.js：

// no changes - same as the previous starting_point.js 
var drawer; 

exports.toggleDrawer = function() { 
    drawer.showDrawer(); 
}; 
exports.onNavigatedTo = function (args) { 
    var page = args.object; 
    drawer = page.getViewById("sideDrawer"); 
}; 

这是我得到的错误：

System.err: Error: Building UI from XML. @file:///app/views/home/home.xml:9:7 
System.err: Module 'ui/sidedrawer' not found for element 'Sidedrawer'. 
System.err: com.tns.NativeScriptException: Failed to find module: "ui/sidedrawer", relative to: app/tns_modules/ 
System.err: com.tns.Module.resolvePathHelper(Module.java:146) 

我是一个完整的初学者和有任何建议有助于！ 谢谢。

Answer 1

在docs的自定义组件部分中，您可以看到自定义名称空间添加到Page，这就是您需要执行的操作。

对starting_point.xml添加xmlns:shared="path/to/shared.xml"（与您的正确路径）。