Блог

Я начинаю работу с NativeScript Angular 2, и я хотел бы реализовать компонент, который активирует разные маршруты в зависимости от ориентации устройства. После долгих поисков мне удалось заставить это работать, но я еще не понял, как получить начальную ориентацию устройства, что, похоже, должно быть проще.

Вот мой AppComponent код. Посмотрите на ngAfterViewInit :

 import {Component, OnInit, OnDestroy, AfterViewInit} from "@angular/core";
import {Router} from "@angular/router";

import _application = require('application');

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
    constructor(private router: Router) {}

    ngOnInit() {
        _application.on(_application.orientationChangedEvent, this.setOrientation.bind(this));
    }

    ngAfterViewInit() {
        // How do I get the initial orientation here instead of hardcoding to 'portrait'?
        this.setOrientation({newValue: 'portrait'})
    }

    ngOnDestroy() {
        _application.off(_application.orientationChangedEvent, this.setOrientation);
    }

    setOrientation(args) {
        if (args.newValue === 'landscape') {
            this.router.navigate(['/landscape']);
        } else {
            this.router.navigate(['/portrait']);
        }
    }
}
  

 private activity:any = application.android.foregroundActivity;
this.activity.getResources().getConfiguration().orientation;
  

Вы могли бы использовать этот плагин. Чтобы получить доступ к обновленной версии, вам нужно будет оплатить ежемесячную подписку разработчикам, которые поддерживают ProPlugins.

Вы можете установить последнюю бесплатную версию с помощью:

 npm i nativescript-orientation
  

Это не дает никаких гарантий, что оно будет работать, особенно в {N} 6 .

После установки вы можете получить текущую ориентацию экрана следующим образом:

 const orientation = require("nativescript-orientation");
console.log(orientation.getOrientation());
  

Хотя я не знаю помощника для определения начальной ориентации, вы все равно можете получить текущие размеры экрана. Вы можете импортировать модуль screen из основной библиотеки.

import { screen } from 'tns-core-modules/platform';

Затем при инициализации приложения определите ориентацию, определив, больше ли высота экрана, чем ширина:

this.orientation = screen.mainScreen.heightPixels > screen.mainScreen.widthPixels ? 'portrait' : 'landscape';

Редактировать: это может быть непоследовательным и не полностью протестировано (это означает, что высота экрана не всегда может быть высотой экрана в портретном режиме). Если это так, при загрузке страницы вы можете использовать ту же стратегию для измерения элемента главной страницы и сравнения высоты и ширины представления для определения ориентации.