Кто-нибудь знает, как определить изменение ориентации для Nativescript?

Я создал два файла xml для экрана. один называется «login-page.port.xml», а другой — «login-page.land.xaml».

Есть ли способ программно определить изменение ориентации в приложении?

Спасибо, Кекс


person user5487910    schedule 10.03.2016    source источник


Ответы (2)


Да, есть способ обнаружить изменение ориентации в приложении. Самый простой способ — на странице, на которую вы хотите получить ориентацию; добавьте загруженные и выгруженные события в ваши файлы page.xml:

<Page loaded="pageLoaded" unloaded="pageUnloaded">

В вашем файле page.js; добавьте такой код:

var application=require('application');
exports.pageLoaded = function() {
  application.on(application.orientationChangedEvent, setOrientation);
};

exports.pageUnloaded = function() {
  application.off(application.orientationChangedEvent, setOrientation);
}

function setOrientation(args) {
   // Will console out the new Orientation
   console.log(args.newValue);
}

Пара заметок; 1. Вы хотите добавить и удалить прослушиватель событий при входе и выходе со страницы; в противном случае прослушиватель является глобальным и будет продолжать срабатывать при изменении ориентации, даже если вы находитесь на другой странице. 2. Вы можете добавить несколько слушателей к этому событию, так что опять же, если вы не удалите слушателя, то каждый раз, когда вы перезагружаете эту страницу, вы будете добавлять ДРУГУЮ копию этого слушателя в группу, и поэтому он будет срабатывать столько раз как вы его добавили. 3. На андроиде в v1.6.1 их баг в стрельбе по ориентации. https://github.com/NativeScript/NativeScript/issues/1656 (в основном, если вы запустите в ландшафте, поверните, он не обнаружит его. Проблема связана с патчем, который я применил вручную к своему коду).


Теперь посмотрим на ваш реальный пример; знаете ли вы, что, по крайней мере, начиная с версии 1.6.x NativeScript, он будет загружать только тот XML, для которого когда-либо была установлена ​​ориентация; но он НЕ будет загружать xml другой ориентации при повороте. Итак, если вы находитесь в Пейзаже; войдите в экран, затем поверните его, он все равно будет использовать ландшафтный xml-файл.


Теперь, после всего сказанного, вы можете серьезно рассмотреть плагин nativescript-orientation, автором которого я являюсь. из, этот плагин упрощает работу с ориентацией экрана и позволяет вам иметь только ОДИН файл .xml, а затем изменять его с помощью css.

person Nathanael    schedule 10.03.2016
comment
Я, вероятно, должен указать для полноты; вы также можете добавить один файл application.on(...) в файл app.js, если обработчик является ГЛОБАЛЬНЫМ по своей природе. - person Nathanael; 10.03.2016
comment
Спасибо за это, @Nathanael! :) - person user5487910; 10.03.2016
comment
Обратите внимание, что если вы хотите использовать какой-либо текущий контент страницы, вам нужно передать this в приложение: application.on(application.orientationChangedEvent, setOrientation, this); - person Vladimir Amiorkov; 24.11.2016
comment
@VladimirAmiorkov - this не нужен, за исключением случая вызова функции класса. В приведенном выше примере при вызове функции setOrientation() функция setOrientation() имеет полный доступ к любой другой функции в том же JS-файле. - person Nathanael; 26.11.2016
comment
@Nathanael Я знаю, что это просто добавил мой комментарий для ясности, так как многие люди будут использовать это в проектах TypeSript, где это будет желательно. - person Vladimir Amiorkov; 28.11.2016
comment
@Nathanael Можно ли отключить ориентацию глобально? (другими словами, как предотвратить ландшафт?) Есть ли какой-нибудь метод args.cancel()?? - person Royi Namir; 11.02.2018
comment
@RoyiNamir - вы можете легко отключить вращение программно / по запросу с помощью плагина ориентации на родной скрипт. - person Nathanael; 12.02.2018

Для тех, кто использует angular2-nativescript typescript

См. метод on в документации.

on(event: "orientationChanged", callback: function, thisArg?: any): any Определено в application/application.d.ts:232 Это событие вызвано тем, что ориентация текущего устройства изменилась.

Параметры

событие: "ориентация изменена"

обратный вызов: функция

(аргументы: OrientationChangedEventData): пустые параметры

аргументы: OrientationChangedEventData

Возвращает void Необязательный thisArg: любой

Возвращает любой

Пример использования:

@Component({
    selector: "Test"
    //templateUrl, styleUrls, etc... 
})
export class TestComponent{
   constructor(){
     on("orientationChanged", this.onOrientationChanged)
   }

   public onOrientationChanged = (evt) => {
      console.log("Orientation has changed !");
      console.log(evt.eventName); // orientationChanged
      console.log(evt.newValue); //landscape or portrait
    };

}
person kemicofa ghost    schedule 28.06.2017
comment
следует из модуля application, т.е. import * as app from "tns-core-modules/application";, а затем вызвать app.on('orientationChanged', (dat)=> {}) - person Idrees Khan; 18.09.2017