NativeScript 2.0自定义组件和CSS

我对NativeScript 2.0 CSS和自定义组件有问题。我的知识似乎有一个巨大的缺口，我错过了一些不明显的重要东西

以使用创建的空NS 2.0应用程序为例

$ tns create test --ng

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

更改app.component.ts：

从“@angular/core”导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类AppComponent{}

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

---

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

自定义.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";

}

.customViewStyle{
    width:80%;
}

从“@angular/core”导入{Component}；
@组成部分({
选择器：“自定义”，
模板：`
`,
})
导出类CustomComponent{}

更改app.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";

}

.customViewStyle{
    width:80%;
}

从“@angular/core”导入{Component}；
从“/custom.component”导入{CustomComponent}
@组成部分({
选择器：“我的应用程序”，
指令：[自定义组件]，
模板：`
`,
})
导出类AppComponent{}

现在输出如下所示：

应用背景色，但不应用宽度

我甚至试过：

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

/*这有意义吗*/

无济于事

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

---

哪里出错了？

我查看了给定代码段中的代码，发现可能是NativeScript问题。目前，在

CustomView

中使用内联样式更改

StackLayout

的宽度只在Android上有效。要在两种平台上同时使用%更改自定义视图的宽度，应在

css

文件中设置此属性，并绑定

cssClass

属性

自定义.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";

}

.customViewStyle{
    width:80%;
}

---

我查看了给定代码段中的代码，发现可能是NativeScript问题。目前，在

CustomView

中使用内联样式更改

StackLayout

的宽度只在Android上有效。要在两种平台上同时使用%更改自定义视图的宽度，应在

css

文件中设置此属性，并绑定

cssClass

属性

自定义.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";

}

.customViewStyle{
    width:80%;
}

---

我刚刚检查了安卓系统。你是对的；很好。不幸的是，即使使用CSS样式（在Android中仍然有效），我也无法改变iOS。谢谢你的见解我很抱歉延迟回复。我做了一点调查并编辑了上面的答案。解决此问题的可能方法是绑定

cssClass

属性，而不是设置类名。我在

iOS

和

Android

两个平台上测试了它，它应该可以在两个平台上正常工作。我刚刚检查了Android。你是对的；很好。不幸的是，即使使用CSS样式（在Android中仍然有效），我也无法改变iOS。谢谢你的见解我很抱歉延迟回复。我做了一点调查并编辑了上面的答案。解决此问题的可能方法是绑定

cssClass

属性，而不是设置类名。我在

iOS

和

Android

两个平台上测试了它，它应该可以在两个平台上正常工作。