nativescript - NativeScript 2.0 自定义组件和 CSS

Question

我遇到了 NativeScript 2.0 CSS 和自定义组件的问题。我的知识似乎存在巨大差距，我错过了一些不明显的重要内容。

使用创建的空 NS 2.0 应用程序

$ tns create test --ng

删除app.css的内容（防止副作用）。

更改app.component.ts：

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    template: `
    <StackLayout orientation="vertical">
        <Label text="Label in first StackLayout"></Label>
        <StackLayout orientation="vertical" 
                     style="width: 80%;background-color: red;">
            <Label text="Label in second StackLayout"></Label>
        </StackLayout>
    </StackLayout>
    `,

})
export class AppComponent {}

很基本的东西。产生以下预期结果：

---

让我们尝试将内部 StackLayout 转换为可重用组件。

custom.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "Custom",
    template: `
    <StackLayout orientation="vertical" 
                 style="width: 80%;background-color: red;">
        <Label text="Label in second StackLayout"></Label>
    </StackLayout>
    `,

})
export class CustomComponent {}

更改app.component.ts

import {Component} from "@angular/core";
import {CustomComponent} from "./custom.component"

@Component({
    selector: "my-app",
    directives: [CustomComponent],
    template: `
    <StackLayout orientation="vertical">
        <Label text="Label in first StackLayout"></Label>
        <Custom></Custom>
    </StackLayout>
    `,

})
export class AppComponent {}

现在输出如下所示：

应用背景颜色但不应用宽度。

我什至尝试过：

<Custom style="width: 80%;"></Custom>  /* Does this even make sense? */

无济于事。

我意识到百分比是实验性的，但怀疑错误出在我的代码而不是 NativeScript 中。

我哪里做错了？

Answer 1

我在给定的代码片段中查看了您的代码，发现它可能是 NativeScript 问题。目前，更改使用内联样式的宽度StackLayout仅CustomView 适用于 Android。要在两个平台上使用 % 更改 CustomView 的宽度，您应该在css文件中设置此属性并绑定cssClass属性。

custom.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "Custom",
    template: `
    <StackLayout orientation="vertical" 
                 [cssClass]="styleView" style="background-color: red;">
        <Label text="Label in second StackLayout"></Label>
    </StackLayout>
    `,

})
export class CustomComponent {

      public styleView="customViewStyle";

}

应用程序.css

.customViewStyle{
    width:80%;
}