Как правильно ссылаться на модальные окна с NativeScript 4

Я создал приложение с NativeScript Angular (теперь на v4.1). Я использую приведенный ниже код, чтобы установить цвет строки состояния на Android, который отлично работает для "обычных" представлений с использованием угловой маршрутизации:

if (isAndroid) {
  if (app.android && device.sdkVersion >= '21') {
    const nativeColor = new Color('purple').android;
    const window = app.android.startActivity.getWindow();
    window.addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    app.android.startActivity.getWindow().setStatusBarColor(nativeColor);
  }
}

Однако это не работает в модальном режиме, когда цветная строка состояния становится черной. У кого-нибудь есть идеи, почему это? Я предполагаю, что app.android.startActivity.getWindow() не ссылается на модальное окно, но я не понимаю, как его получить.

Не уверен, в какой степени это связано, но я также не могу установить другой индикатор загрузки на iOS в модальных окнах, используя этот код из документации (снова отлично работает в немодальных представлениях):

if (isIOS) {
  var indicator = this.page.getViewById("spinner");
  indicator.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge;
}

Спасибо за любые указатели!

P.S.

Вот демонстрационный проект, который отображает проблему как со строкой состояния на Android, так и с а также невозможность установить индикатор активности на iOS.


nativescript nativescript-angular
person Joni    schedule 15.07.2018    source источник
comment
Вы можете создать демо-версию игровой площадки?   -  person bhavin jalodara    schedule 15.07.2018
comment
@bhavinjalodara конечно же! Я отредактировал свой ответ, включив в него демонстрационный проект. Спасибо!   -  person Joni    schedule 16.07.2018

Ответы (1)


arrow_upward
0
arrow_downward

Для тех, кто прочитает это позже: у меня была помощь по NativeScript forum и еще не выполнил настройку цвета строки состояния в модальном окне, но мне удалось охватить фон под строкой состояния в модальном компоненте, что достаточно для моих целей.

Я также смог изменить ActivityIndicator в модальном окне, просто используя Angular ViewChild в элементе индикатора, вместо того, чтобы находить его через Page (который, как оказалось, не относится к модальному).

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { ModalDialogParams } from "nativescript-angular/modal-dialog";
import { isIOS, isAndroid, device } from 'platform';
import * as app from "application";

declare var UIActivityIndicatorViewStyle: any;
declare var android: any;

@Component({
    template: `
        <StackLayout #root>
            <StackLayout orientation="horizontal">
                <ActivityIndicator #spinner id="spinner" busy="true"></ActivityIndicator>
                <ActivityIndicator busy="true"></ActivityIndicator>
            </StackLayout>
        </StackLayout>
    `
})
export class ModalTest implements OnInit, AfterViewInit {
    @ViewChild('root') root: ElementRef;
    @ViewChild('spinner') spinner: ElementRef;

    constructor(
        public modalParams: ModalDialogParams
    ) {}

    public ngOnInit() {

        /* show large activity indicator on iOS */

        if (isIOS) {
            this.spinner.nativeElement.ios.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge;
        }
    }

    public ngAfterViewInit() {
        if (isAndroid) {

            setTimeout(() => {
                if (app.android && device.sdkVersion >= '21') {
                    const dialog = this.root.nativeElement._dialogFragment.getDialog();
                    const window = dialog.getWindow();
                    window.addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                }
            },1);
        }
    }

    public closeModal() {
        this.modalParams.closeCallback();
    }
}
person Joni    schedule 22.07.2018