Nativescript平台特定模板不起作用

Question

在Nativescript 5.0中为Android和iOS构建应用程序。出于某种原因，和标签看起来不像他们应该的那样工作，或者我可能做错了。

<StackLayout>
<android>
    <ActionBar class="header" flat="true">
        <StackLayout orientation="vertical">
            <app-eon-colors-top></app-eon-colors-top>
            <GridLayout columns="auto, *, auto, auto" rows="2*">
                <Label class="title" col="0" text="{{title}}" verticalAlignment="center"></Label>
                <Label class="icon fa-solid" col="2" text="&#xf2f5;" verticalAlignment="center"></Label>
                <Label class="logout fa-solid" col="3" row="0" text="Logga ut" verticalAlignment="center" (tap)="logout()"></Label>
            </GridLayout>
        </StackLayout>
    </ActionBar>
</android>
<ios>
    <ActionBar class="header" flat="false">
        <StackLayout orientation="horizontal">
            <Label class="title" text="{{title}}"></Label>
        </StackLayout>
        <ActionItem ios.position="right">
            <StackLayout orientation="horizontal">
                <Label class="icon fa-solid" text="&#xf2f5;"></Label>
                <Label class="logout fa-solid" ios.position="right" text="Logga ut" (tap)="logout()"></Label>
            </StackLayout>
        </ActionItem>
    </ActionBar>
</ios>
</StackLayout>

在android上运行此模板时，它只使用ios块中的代码，但在ios上它似乎工作正常。

Answer 1

这是NativeScript Core编写平台特定XML的方式。使用Angular，您可以使用指令，有一个Github issue讨论此问题，并提供示例代码以在您的项目上实现此平台特定指令。

平台特定的结构指令

import { Directive, ViewContainerRef, TemplateRef, Inject } from "@angular/core";
import { DEVICE } from "nativescript-angular/platform-providers";

import { Device, platformNames } from "platform";

@Directive({
    selector: "[appIfAndroid]"
})
export class IfAndroidDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.android) {
            container.createEmbeddedView(templateRef);
        }
    }
}

@Directive({
    selector: "[appIfIos]"
})
export class IfIosDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.ios) {
            container.createEmbeddedView(templateRef);
        }
    }
}

在模块中导入此指令后，您可以在任何标记上使用*appIfAndroid / *appIfIos。