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

在"cannot resolve symbol 'google'"中的自定义组件部分，您可以看到添加到Page的自定义命名空间，这就是您需要做的事情。

在starting_point.xml上添加xmlns:shared="path/to/shared.xml"（使用正确的路径）。

NativeScript - 模块＆＃39; ui / sidedrawer＆＃39;找不到元素＆＃39; Sidedrawer＆＃39;

1 个答案: