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"（與您的正確路徑）。