NativeScript JavaScript模式对话框失败，并在iOS上显示ViewHierarchy错误

Question

我在一个更大的NativeScript JavaScript应用程序中有一个相对简单的模式对话框，它在启动时失败，并显示错误消息。

CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:166:30: ViewHierarchy: Parent is already presenting view controller. Close the current modal page before showing another one!

这在Android上运行良好，但在iOS上始终失败。代码遵循https://docs.nativescript.org/ui/modal-view上的示例。tns医生没有显示错误，所有代码都是最新的。让我头疼的是弄清楚我能改变什么，因为这是整个应用程序中唯一的模式对话框。

我欢迎任何想法。

编辑：

我尝试了一个类似但更老的应用程序，相同的模式对话框在那里如预期的那样工作。但是，它运行的是4.2.0版本的核心模块和iOS。

✔ Component nativescript has 5.3.2 version and is up to date.
⚠ Update available for component tns-core-modules. Your current version is 4.2.0 and the latest available version is 5.3.1.
⚠ Update available for component tns-android. Your current version is 4.2.0 and the latest available version is 5.3.1.
⚠ Update available for component tns-ios. Your current version is 4.2.0 and the latest available version is 5.3.1.

下面是有问题的模式对话框代码：

/**
* Open Modal dialog to select phone number when multiple exist
* @param {object} page 
* @param {object} contact - object returned from getContact 
* @return {object} - Promise, result from selected contact, or null
*/
selectPhone = ((page, contact) => {
  return new Promise((resolve, reject) => {

    var modalPageModule = "views/phone-select-page";
    var fullscreen = false;

    var slept; // Promise for wait on iOS 

    // Wait briefly on iOS for contacts app to close (admittedly a hack)
    if (page.ios) {
      slept = myutils.sleep(50);
    } else {
      slept = Promise.resolve();
    }

    slept.then(() => {
      page.showModal(  // Ref: https://docs.nativescript.org/ui/modal-view
        modalPageModule,
        contact,
        ((response) => { // anonymous closeCallback function
          if (response) {
            resolve(response); // return promise with modified contact
          } else { // (handle back button press on Android)
            reject(response);
          }
        }), // end closeCallback function
        fullscreen
      ); // end page.showModal
    }); // end slept.then
  }); // end return New Promise
}); // end selectPhone

下面是模式对话框本身

<Page xmlns="http://www.nativescript.org/tns.xsd" shownModally="onShownModally" 
  xmlns:dd="nativescript-drop-down">
  <StackLayout class="modal-page">
    <Label class="instructions" textWrap="true" text="Select the phone number to use" />
    <dd:DropDown class="phones" items="{{ phones }}" selectedIndex="{{ phoneIndex }}" hint="Tap here to choose number" />
    <StackLayout class="hr"/>
    <GridLayout columns="*,*" rows="auto">
      <Button class="btn navbtn" col="1" tap="onOkTap" text="OK"/>
    </GridLayout>
  </StackLayout>
</Page>

下面是模态的.js文件：

var observableModule = require("tns-core-modules/data/observable");

var closeCallback;  // make modal closeCallback function global 

exports.onShownModally = function (args) {
  const page = args.object;
  var model = new observableModule.fromObject(args.context);
  page.bindingContext = model;
  closeCallback = args.closeCallback;
}

exports.onOkTap = function (args) {
  var page = args.object.page;
  var response = page.bindingContext; // use input context object as response object 
  response.phone = response.phones[response.phoneIndex];
  response.phone = response.phone.substr(response.phone.indexOf(":")).match(/\d/g).join("");
  page.closeModal();
  closeCallback(response);
}

Answer 1

这个问题似乎是从iOS上的联系人应用程序返回的时间问题。这就是代码的原因：

// Wait briefly on iOS for contacts app to close (admittedly a hack)
if (page.ios) {
  slept = myutils.sleep(50);
} else {
  slept = Promise.resolve();
}

(遗憾的是，去年夏天当我最初开发这段代码时，我已经处理了同样的问题。)如果我将延迟从50ms更改为750ms，代码工作正常。我猜这是由于{N} 5中的更改。所以，这仍然是一个黑客，但我现在可以接受它。

编辑2020年4月24日:我为此开发了一个修复程序，并为nativescript-contact创建了一个拉取请求(#84)。有关详细信息，请参阅issue #75。