有人知道如何检测 Nativescript 的方向变化吗？

Question

我为一个屏幕创建了两个 xml 文件。一个名为“login-page.port.xml”，另一个名为“login-page.land.xaml”。

有没有办法以编程方式检测应用程序内的方向变化？

谢谢， 凯克斯

Answer 1

是的，有一种方法可以检测应用程序中的方向变化。最简单的方法是在你想要获取方向的页面中；将加载和卸载事件添加到您的 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 的 android 上，它们是定向触发的错误。 https://github.com/NativeScript/NativeScript/issues/1656（基本上如果你从横向开始，旋转它不会检测到它。问题是我手动应用到我的代码的补丁）。

---

现在看看你的实际例子；您是否知道，至少从 NativeScript 的 1.6.x 版本开始，它只会加载当前设置为的任何方向的 XML；但它不会在您旋转时加载其他方向的 xml。所以，如果你在风景中；进入屏幕然后旋转它仍然会使用 Landscape xml 文件。

---

现在说了这么多，您可能会认真考虑查看我是作者的nativescript-orientation 插件，该插件简化了屏幕方向的处理，并允许您只有一个 .xml 文件，然后通过 css 进行更改。

Answer 2

对于那些使用angular2-nativescript typescript

请参考on method found in the documentation

on(event: "orientationChanged", callback: function, thisArg?: any): 任何定义在 application/application.d.ts:232 引发此事件 当前设备的方向已更改。

参数

事件：“orientationChanged”

回调：函数

(args: OrientationChangedEventData): 无效参数

参数：OrientationChangedEventData

返回 void 可选 thisArg: any

返回任意

使用示例：

@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
    };

}