{NativeScript} SideDrawer 错误 "Module 'ui/drawer-content' not found for element 'DrawerContent'"

Question

NativeScript 初学者，我一直在网上搜索，但由于过去几个月的基本代码中似乎有很多 iterations/changed，所以我在网上找到的示例非常不一致。

所以开始了，我正在尝试从 "nativescript-telerik-ui/sidedrawer" 实现一个简单的 SideDrawer，但失败得很惨。

注意几点：

在 main-page.ts 文件中，我似乎无法访问侧边栏的 "id" 属性（总是 return undefined )
on 运行（on Android，还没有尝试 iOS），我收到以下错误："Module 'ui/drawer-content' not found for element 'DrawerContent'"

下面是我的文件+代码：

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"
    }
}

主-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>

主-page.ts

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 看起来很棒，真的很期待用它来构建一些好的东西。

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

Answer 1

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>

并在 drawer:RadSideDrawer.mainContent 中实现您的初始页面内容（就像您已经完成的那样）。原因：sidedrawer 不能与 xml-tree 中的其他 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

{NativeScript} SideDrawer 错误 "Module 'ui/drawer-content' not found for element 'DrawerContent'"

{NativeScript} SideDrawer error "Module 'ui/drawer-content' not found for element 'DrawerContent'"

android

nativescript