如何获取 Nativescript angular 模态的原生视图 window 的引用？

Question

我试图仅在模态页面中设置沉浸式模式，但是当我在模态组件的 ngOnInit 中执行以下操作时

Application.android.foregroundActivity.getWindow().getDecorView().setSystemUiVisibility(
            // tslint:disable-next-line:no-bitwise
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar
            | View.SYSTEM_UI_FLAG_IMMERSIVE
        );

它为应用程序全局设置沉浸式视图，模态视图除外。模态视图仍然保留导航栏和状态栏。基本上我想要的是获得对模态 window 的引用，以便我可以使用它来设置全屏标志。我使用 fragment manager 尝试了很多东西，但它似乎根本不起作用。

Answer 1

我运行在我自己的应用程序中遇到了同样的问题。我能够使用下面的方法解决它（@nativescript/core: 7.2.1）。

首先，我获得了对模态视图中使用的根组件的引用：

component.html

<AbsoluteLayout #root>
  <!-- the rest of the modal -->
</AbsoluteLayout>

component.ts

export class Component {
  //...
  @ViewChild("root", { static: true }) root: ElementRef;
  //...
}

其次，我创建了一个尝试隐藏状态栏的方法。这需要反复试验才能获得对正确本机对象的引用，但下面的链最终对我有用：

component.ts

hideAndroidStatusBar(): void {
    if(!global.isIOS) {
        let decorView = this.root.nativeElement._dialogFragment.getDialog().getWindow().getDecorView();
        decorView.setSystemUiVisibility(android.view.View.SYSTEM_UI_FLAG_FULLSCREEN);
    }
}

最后，我在组件的 ngOnInit 函数中设置了一个时间间隔，它会尝试隐藏状态栏，直到成功为止。这样做是因为引用链在初始化期间没有解析，我找不到可靠的回调来注册它。

component.ts

ngOnInit(): void {
  let hideBar = setInterval(() => {
    try {
      this.hideAndroidStatusBar();
      clearInterval(hideBar);
    } catch { }
  }, 50);
}

虽然这种方法对我有用，但感觉有点笨拙……不能保证它对其他任何人都有效。

Answer 2

对于遇到同样问题的任何人。这就是我所做的。这与aleroy发布的答案非常相似。

首先，我获得了模态视图中使用的根组件的引用然后在：

ngAfterViewInit() {
    setTimeout(() => {
        this._modalWindow = this.root.nativeElement._dialogFragment.getDialog().getWindow();
        this._modalWindow.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        // this._modalWindow.setStatusBarColor(android.graphics.Color.BLACK)

        this._modalWindow.getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        );
    }, 1);
}

要清除全屏并隐藏导航标志：

ngOnDestroy() {
    this._modalWindow.clearFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON)
    this._modalWindow.getDecorView().setSystemUiVisibility(
        // tslint:disable-next-line:no-bitwise
        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
    );
}

如何获取 Nativescript angular 模态的原生视图 window 的引用？

How to get the reference of a Nativescript angular modal's native view window?

android

angular

nativescript

angular2-nativescript