nativescript - 如何在 NS 主题中应用 RadDatForm 样式？

Question

使用 NS 主题时，RadDataForm 的样式不起作用。我的 scss 中有这个：

@import "~@nativescript/theme/core";

首先，没有显示 Picker 的箭头。并且任何样式 (TKPropertyEditorStyle) 都会被忽略。

我怎样才能继续使用主题并能够同时为组件设置样式？

谢谢。

重现步骤：

> tns create bugng --template tns-template-drawer-navigation-ng
    found 6 vulnerabilities (5 moderate, 1 high)
> npm audit fix
    3 vulnerabilities required manual review and could not be updated
    1 package update for 1 vulnerability involved breaking changes
> npm audit fix --force
> tns plugin add nativescript-ui-dataform

然后，在 app.module.ts 中，添加：

import { NativeScriptFormsModule } from "nativescript-angular/forms";
  ...
  imports: [
    ...
    NativeScriptFormsModule
  ]

然后，在 home.module.ts 中，添加：

import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
  ...
  imports: [
    ...
    NativeScriptUIDataFormModule
  ]

在 home.component.ts 中：

import { Component, OnInit, ViewChild } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";
import { RadDataFormComponent } from "nativescript-ui-dataform/angular/dataform-directives";

@Component({
    selector: "Home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    @ViewChild('myCommitDataForm', { static: false }) myCommitDataFormComp: RadDataFormComponent;
    private _person: Person;

    constructor() {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        this._person = new Person("John", 23, "[e-mail]", -1);
    }

    onDrawerButtonTap(): void {
        const sideDrawer = <RadSideDrawer>app.getRootView();
        sideDrawer.showDrawer();
    }

    public onPropertyCommitted(args) {
        console.log(args.propertyName);
        if (this.myCommitDataFormComp.dataForm.editedObject) {
            console.log(this.myCommitDataFormComp.dataForm.editedObject);
        }
    }

    get person(): Person {
        return this._person;
    }
}

class Person {
    constructor(public name: string, public age: number, public email: string, public city?: number) { }
}

在 home.component.html 中：

<ActionBar>
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <ActionItem icon="res://menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
        ios.position="left">
    </ActionItem>
    <Label text="Home"></Label>
</ActionBar>

<GridLayout class="nt-form" rows="132,auto,auto,*">
    <Image height="128" src="res://logo"></Image>
    <Label row="1" class="page__content-placeholder" text="<!-- Page content goes here -->"></Label>
    <RadDataForm row="2" #myCommitDataForm [source]="person" tkExampleTitle tkToggleNavButton commitMode="Immediate" (propertyCommitted)="onPropertyCommitted($event)">
        <!-- >> angular-dataform-adjustment-html -->
        <TKEntityProperty tkDataFormProperty name="name" displayName="Name" index="0">
            <TKPropertyEditor tkEntityPropertyEditor type="Text">
                <TKPropertyEditorStyle tkPropertyEditorStyle strokeColor="#00695c" strokeWidth="2" fillColor="#4db6ac" labelHidden="false"
                labelTextSize="18" ios:labelFontName="Times New Roman" android:labelFontName="sans-serif-light" labelFontStyle="Italic"
                labelPosition="Top" labelTextColor="#00695c"></TKPropertyEditorStyle>
            </TKPropertyEditor>
            <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="Username can't be empty."></TKNonEmptyValidator>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="age" displayName="Age" index="1">
            <TKPropertyEditor tkEntityPropertyEditor type="Number"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="email" displayName="E-Mail" index="2">
            <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
        </TKEntityProperty>
        <TKEntityProperty tkDataFormProperty name="city" displayName="City" index="3" valuesProvider="Montreal, Quebec, Toronto" hintText="city">
            <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
            <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="City can't be empty."></TKNonEmptyValidator>
        </TKEntityProperty>
    </RadDataForm>
</GridLayout>

标签： nativescript