nativescript-orientation

此插件已更新，以便可以用于nativescript >= 7

此仓库是从NathanaelA/nativescript-orientation分叉而来。

一个用于处理声明式UI和屏幕方向的NativeScript插件此处理了方向问题的两个方面；一方面是当方向改变时的事件；另一方面是手动改变方向的能力。

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。

安装

tns plugin add nativescript-orientation

NativeScript 2.x.x

tns plugin add [email protected]

用法

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

require( "nativescript-orientation" );

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

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

您可能会问，这究竟有什么帮助？

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

Plain Awesome NativeScript (PAN)

StackLayout {
  background-color: red;
}

.landscape StackLayout {
  background-color: green;
}

NativeScript Angular (NAN)


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

最近有人告诉我:host是一个更好的选择，因为它在Angular中造成的潜在隔离副作用更少。

StackLayout {
    background-color : red;
}


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

所以，在竖屏模式下背景是红色，在横屏模式下颜色是绿色。请注意，在Angular中，您需要在.landscape前加上/deep/才能使其正常工作！另外，我最近得知对于Angular，: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代替。

附加辅助方法

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

orientation.getOrientation(sensors?)

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

某些Android平板电脑会关于竖屏和横屏说谎；因此，我们根据当前的屏幕尺寸来确定方向

  var orientation = require('nativescript-orientation');
  console.log(orientation.getOrientation());  // Returns the enum DeviceOrientation value

orientation.setOrientation(direction, animation)

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

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

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

  var orientation = require('nativescript-orientation');
  orientation.setOrientation("landscape");

orientation.enableRotation() - 启用方向

这将启用自动方向支持。

  var orientation = require('nativescript-orientation');
  orientation.enableRotation();  // The screen will rotate to whatever the current settings are...

orientation.disableRotation() - 禁用方向

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

  var orientation = require('nativescript-orientation');
  orientation.disableRotation(); // The screen will no longer rotate

orientation.setFullScreen(value) - true/false

方向应用器

方向应用器为的方向应用逻辑提供钩子。每当应用其方向逻辑时，它也会调用您添加的任何方向应用器。这允许您在需要考虑/应用方向时轻松执行自己的逻辑。方向应用器是简单的函数，它接收1个参数：当前方向（以字符串形式，与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