Question

我尝试使用此链接https://docs.nativescript.org/angular/code-samples/modal-page.html创建一个包含nativescript的自定义对话框一切都很棒。但我不知道如何使模态对话框透明。属性backgroundcolor不适用于ios 任何帮助都会没问题

Answer 1

Apple建议您不要使模式透明，请在nativescript的问题跟踪器上查看此问题：https://github.com/NativeScript/NativeScript/issues/2086#issuecomment-220629191

Nativescript的内置模式在iOS上始终是全屏模式，不能透明。

但如果你（像我们一样）需要，你可以解决这个问题。

以下是我们使用nativescript-angular进行的操作：首先在模态组件中注入Page。在iOS上覆盖页面对象上的函数_showNativeModalView，如下所示：

import { Page } from 'ui/page';
const pageCommon = require('ui/page/page-common').Page;
import { Color } from 'color';
import * as utils from 'utils/utils';

...... 在构造函数中：

if (page.ios) {
  // iOS by default won't let us have a transparent background on a modal
  // Ugly workaround from: https://github.com/NativeScript/nativescript/issues/2086#issuecomment-221956483
  page.backgroundColor = new Color(50, 0, 0, 0);

  (<any>page)._showNativeModalView = function(parent, context, closeCallback, fullscreen) {
    pageCommon.prototype._showNativeModalView.call(this, parent, context, closeCallback, fullscreen);
    let that = this;

    this._modalParent = parent;
    if (!parent.ios.view.window) {
        throw new Error('Parent page is not part of the window hierarchy. Close the current modal page before showing another one!');
    }

    if (fullscreen) {
      this._ios.modalPresentationStyle = 0;
    } else {
      this._ios.modalPresentationStyle = 2;
      this._UIModalPresentationFormSheet = true;
    }

    pageCommon.prototype._raiseShowingModallyEvent.call(this);

    this._ios.providesPresentationContextTransitionStyle = true;
    this._ios.definesPresentationContext = true;
    this._ios.modalPresentationStyle = UIModalPresentationOverFullScreen;
    this._ios.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
    this._ios.view.backgroundColor = UIColor.clearColor;

    parent.ios.presentViewControllerAnimatedCompletion(this._ios, utils.ios.MajorVersion >= 9, function completion() {
      that._ios.modalPresentationStyle = UIModalPresentationCurrentContext;
      that._raiseShownModallyEvent(parent, context, closeCallback);
    });
  };
}

您也可以覆盖该Page的原型，但我认为在Page的实例上覆盖它会更加清晰。

nativescript模态对话框透明度

1 个答案: