Шаблон для платформы Nativscript не работает - PullRequest
Новая
       6

Шаблон для платформы Nativscript не работает

0 голосов
/ 18 февраля 2019

Создание приложения в 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 вроде нормально работает.

1 Ответ

0 голосов
/ 18 февраля 2019

Это NativeScript Core способ написания XML для конкретной платформы.С Angular вы можете использовать директивы, существует проблема Github , которая обсуждает эту проблему, а также предоставляет пример кода для реализации этой директивы, специфичной для вашей платформы, в вашем проекте.

Платформа, специфичнаяструктурная директива 

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 для любого тега.

...