nativescript-orientation

A NativeScript 插件用于处理声明性 UI 和屏幕方向。此插件处理方向问题的两个方面；当方向改变时的事件；以及手动更改方向的能力。

ProPlugins

我们镇上有一项令人惊叹的新服务！这项服务提供经过测试的新插件和升级版插件。所有 ProPlugins 都已经过验证，适用于 NativeScript 6.x。如果您想获取最新、已知正常工作和增强的插件；请访问 https://ProPlugins.org -- 因为我相信 ProPlugins 为社区带来的价值，我的所有开发工作都是基于 ProPlugins 版本进行的。

社区

请随意继续使用此版本的插件，现在它由您（社区）100% 维护，因此我将乐意继续支持社区版本，接受此插件的任何/所有 PR 并发布它。我将尝试验证 PR 中没有后门；但我不会进行任何测试，因此如果它出现故障，将由您负责发送 PR！

开发人员

许可协议

此软件根据 MIT 许可协议发布，这意味着您可以将其包含在任何类型的程序中 -- 然而，对于需要支持合同、变更、增强和/或商业许可的实体，请联系我 http://nativescript.tools。

我还做合同工作；所以如果您想为 NativeScript（或任何其他软件项目）构建一个模块，请随时联系我 [email protected]。

示例快照

Sample1 感谢 TJ VanToll 提供了令人惊叹的动画 gif。

安装

NativeScript 7.x.x

tns plugin add nativescript-orientation

NativeScript 3.x.x - 6.x.x

tns plugin add [email protected]

NativeScript 2.x.x

tns plugin add [email protected]

迁移到 3.0 以支持 NativeScript 7 和 es2017 :)

将所有

var orientation = require( "nativescript-orientation" );

替换为

import orientation from "nativescript-orientation";

使用

要使用此模块，只需使用 require() 它

require( "nativescript-orientation" );

此插件有两个不同的功能；第一个功能是在屏幕旋转时运行函数和设置 css 的酷功能。对于此功能，您不需要保留对它的引用以处理方向事件和 css。您只需要加载一次。我建议您将其添加到您的 app.js 文件中并忘记它。它将自动将其方法附加到 NativeScript 库中的所有适当类中，使其表现得像内置的一样。这样做是自动向当前页面的 cssClass 变量添加和移除 "landscape"（并在幕后进行其他魔法操作，使其真正工作）。

如果您想手动控制方向，则需要加载它并使用所需的函数。

您问，这到底有什么帮助？

嗯，猜猜 CSS 中的级联代表什么？
是的，这意味着现在它工作了

纯酷原生命令行（PAN）

StackLayout {
  background-color: red;
}

.landscape StackLayout {
  background-color: green;
}

原生脚本Angular（NAN）


/deep/ .landscape StackLayout  {
    background-color: green;
}

我最近得知:host是一个更好的选择，因为它在Angular中引起的潜在隔离副作用更少。

StackLayout {
    background-color : red;
}


.landscape :host StackLayout {
  background-color: green;
}

因此，在纵向模式下背景为红色，在横向模式下颜色为绿色。请注意，在Angular中，您需要使用/deep/前缀来指定.landscape才能使其生效！此外，我最近得知:host也是一个有效选项，我尚未进行测试；但我希望将其记录下来。

为什么要使用这个功能？

您可以使用这种方法设置所有正常的CSS值，包括宽度、高度和字体大小。通过使用CSS控制任何普通项，以及使用您的页面导出的exports.orientation来控制CSS无法控制的任何内容，您可以在横向和纵向之间完全改变外观。

您可以将以下功能添加到任何需要的页面：

exports.orientation(args)

args.landscape = true | false

args.object = 当前页面

此函数（如果存在）将在页面首次创建时运行，因此您可以设置任何所需的默认值。（这将在PageNavigatingTo事件同时运行）此函数（如果存在）将在每次方向改变时运行。由于在此刻一些项无法通过CSS控制，例如ScrollView的方向，此事件允许您通过代码在方向改变时控制这些项。

请注意，NativeScript中还有一个内置事件，称为orientationChanged事件。这两个事件之间的区别在于，内置事件仅在方向改变时被调用；此事件在每次屏幕导航和设备旋转时都会被调用，允许您在屏幕创建过程中设置任何旋转内容。
Angular 注意：exports.orientation函数事件在Angular中不起作用，因为Angular没有相同的概念。您可以使用orientation.addOrientationApplier代替。

附加辅助方法

import orientation from "nativescript-orientation";

orientation.getOrientation(sensors?)

可选的sensor === true，将在Android上返回传感器值而不是屏幕尺寸计算

一些Android平板电脑在纵向与横向之间撒谎；因此我们根据当前的屏幕尺寸来确定方向

  console.log(orientation.getOrientation());  // Returns the enum DeviceOrientation value

orientation.setOrientation(direction, animation)

方向 - "portrait" | "landscape" | "landscapeleft" | "landscaperight" | enum DeviceOrientation

Animation === false，在iOS上禁用动画。（目前仅限iOS）

这将自动在更改方向后禁用旋转支持。

  orientation.setOrientation("landscape");

orientation.enableRotation() - 启用方向

这将启用自动方向支持。

  orientation.enableRotation();  // The screen will rotate to whatever the current settings are...

orientation.disableRotation() - 禁用方向

这将禁用自动方向支持并将它锁定到当前方向。

  orientation.disableRotation(); // The screen will no longer rotate

orientation.setFullScreen(value) - true/false

方向应用器

方向应用器作为对nativescript-orientation的方向应用逻辑的钩子。每当nativescript-orientation应用其方向逻辑时，它也会调用您添加的任何方向应用器。这允许您在需要考虑/应用方向时轻松执行自己的逻辑。方向应用器是简单的函数，接收一个参数：以字符串形式返回的当前方向（与orientation.getOrientation()方法返回的相同）。下面提供了添加和删除方向应用器的方法以及示例。

oprientationApplierCallback

args.landscape = true | false

args.object = 当前页面

回调接收与正常NativeScript中的exports.orientation事件相同的参数。

orientation.addOrientationApplier(orientationApplierCallback)

这添加了一个方向应用器。

var MyModule = (function() {
  var orientation = require('nativescript-orientation');

  this.boundProperty = "some value";


  function myCallback(args) {
      if (args.landscape) {
        // Do something landscap-y
        return;
      }

      // Do something portrait-y
      // Assume this includes updating boundProperty on this module's scope.      
      this.boundProperty = "a different value";
  }

  orientation.addOrientationApplier(myCallback.bind(this));

  return {
    boundProperty: this.boundProperty
  };
})();

exports.MyModule = MyModule;

orientation.removeOrientationApplier(orientationApplierCallback)

这将从要执行的方向应用器集合中删除一个方向应用器。

var MyModule = (function() {
  var orientation = require('nativescript-orientation');

 function myCallback(args) {
      if (args.landscape) {
        // Do something landscap-y
        return;
      }

      // Do something portrait-y
      // Assume this includes updating boundProperty on this module's scope.      
      this.boundProperty = "a different value";
  }

  var myOrientationApplier = myCallback.bind(this);
  orientation.addOrientationApplier(myOrientationApplier);

  // Somewhere later in your code...
  orientation.removeOrientationApplier(myOrientationApplier);

  return {
    boundProperty: this.boundProperty
  };
})();

exports.MyModule = MyModule;

使用此功能时，有两件关键事情需要记住

在添加方向应用器时，使用 myCallback.bind(this)（这保留了回调方法正确的'this'作用域）。
在Nativescript Angular中，方向改变事件不会触发Angular变更检测周期。因此，您需要手动在方向应用器中通过注入 ChangeDetectorRef 从 @angular/core 到您的组件，并从方向应用器内部调用 this.changeDetectorRef.detectChanges() 来触发变更检测；

贡献者

Ashton Cummings
Dick Smith
Dimitar Tachev
Emiel Beeksma
Zsolt Racz
Brad Linard