android - {NativeScript} SideDrawer错误“找不到元素'DrawerContent'的模块'ui/drawer-content'”

NativeScript初学者，我一直在整个Web上进行搜索，但是由于最近几个月在基础代码中似乎有很多迭代/更改，因此我在Web上发现的示例非常不一致。

因此，我尝试通过“ nativescript-telerik-ui / sidedrawer”实现一个简单的SideDrawer，但失败了。

需要注意的几点：


在main-page.ts文件中，我似乎无法访问侧边抽屉的“ id”属性（始终返回未定义）
在运行时（在Android上，尚未尝试iOS），出现以下错误：“找不到元素'DrawerContent'的模块'ui / drawer-content'”


以下是我的文件和代码：

package.json

{
    "nativescript": {
        "id": "org.nativescript.githubreader",
        "tns-ios": {
            "version": "1.7.0"
        },
        "tns-android": {
            "version": "1.7.1"
        }
    },
    "dependencies": {
        "github-api": "^0.11.2",
        "lodash": "^4.10.0",
        "nativescript-telerik-ui": "^1.0.1",
        "tns-core-modules": "1.7.1"
    },
    "devDependencies": {
        "nativescript-dev-typescript": "^0.3.0",
        "typescript": "^1.8.9"
    }
}

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:drawer="nativescript-telerik-ui/sidedrawer"
    loaded="loaded"
    navigatingTo="navigatingTo">

    <drawer:rad-side-drawer id="sideDrawer">
        <drawer:rad-side-drawer.mainContent>

        <!-- Home page contents -->
        <stack-layout>
            <image src="https://i.imgur.com/LY3cb3A.png" id="logo" tap="" height="100" margin="20 0 0 0" />
            <label text="Welcome to the NativeScript drawer template! This is the home page. Try tapping the logo." margin="20" horizontalAlignment="center" textWrap="true" />
        </stack-layout>

        </drawer:rad-side-drawer.mainContent>
        <drawer:rad-side-drawer.drawerContent>
            <widgets:drawer-content />
        </drawer:rad-side-drawer.drawerContent>
    </drawer:rad-side-drawer>

    <StackLayout orientation="vertical">
        <Label text="{{ message }}" class="message" textWrap="true"/>
    </StackLayout>
</Page>

主页

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { MainModel } from "../../models/main-view";

let drawer:any;

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    // Get the event sender
    const page = <Page>args.object;
    page.bindingContext = new MainModel();
    drawer = page.getViewById("sideDrawer");
    console.log("navigatingTo");
    console.log(drawer);
}

export function loaded(args: EventData) {
    const page = <Page>args.object;
    drawer = page.getViewById("sideDrawer");
    console.log("Loaded");
    console.log(drawer);
};

export function toggleDrawer() {
    if(drawer) {
        drawer.toggleDrawerState();
    }
}

我真的被困在那儿，也非常感谢一些更有经验的人在此问题上的帮助。

NativeScript看起来很棒，并且非常期待能够用它来构建一些好的东西。

期待阅读一些答案，感谢您到目前为止的阅读:)

最佳答案

1.）对于模块“ ui / drawer-content”未加载问题：

您使用的是widgets：drawer-content标记，而没有对此窗口小部件的任何引用。
无需加载外部窗口小部件，您可以创建自定义窗口小部件。
例如，将未引用的窗口小部件替换为：

    <StackLayout cssClass="drawerContent">
        <StackLayout>
            <Label text="Navigation Menu"/>
        </StackLayout>
        <StackLayout cssClass="drawerMenuContent">
            <Label text="Primary" />
            <Label text="Social" />
            <Label text="Promotions" />
            <Label text="Labels" />
        </StackLayout>
    </StackLayout>

2）至于抽屉ID不确定的问题，您应该在main-page.xml中删除代码的以下部分

<StackLayout orientation="vertical">
    <Label text="{{ message }}" class="message" textWrap="true"/>
</StackLayout>

并在抽屉：RadSideDrawer.mainContent中实现您的初始页面内容（就像您已经完成的一样）。
原因：sidedrawer不能与xml树中的其他ui元素处于同一级别。

<drawer:RadSideDrawer.mainContent>
     <!-- Home page contents -->
    <StackLayout>
        <Image src="https://i.imgur.com/LY3cb3A.png" id="logo"  />
        <Label text="Welcome to the NativeScript drawer template! Swipe to show drawer!" margin="20"  />
    </StackLayout>
</ drawer:RadSideDrawer.mainContent>

有关侧边抽屉的其他信息，我建议以下教程here

关于android - {NativeScript} SideDrawer错误“找不到元素'DrawerContent'的模块'ui/drawer-content'”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36692662/