Question

在Nativescript 5.0中为Android和iOS构建应用程序。由于某种原因，and标签似乎无法正常工作，否则我可能做错了。

<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。

Nativscript平台特定的模板不起作用

1 个答案: