NativeScript - 未找到元素“Sidedrawer”的模块“ui/sidedrawer”

Question

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

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>

shared/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>

shared/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"（使用正确的路径）。