Question

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

所以这里，我试图从“nativescript-telerik-ui / sidedrawer”实现一个简单的SideDrawer但是失败了。

需要注意以下几点：

在 main-page.ts 文件中，我似乎无法访问sidedrawer的“id”属性（总是返回undefined）
on run（在Android上，还没有尝试iOS），我收到以下错误：“找不到元素'抽象内容'的模块'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"
    }
}

主要-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'未加载问题：

您正在使用小部件：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-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错误“模块'ui / drawer-content'找不到元素'DrawerContent'”

1 个答案: