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 医生显示没有错误，所有代码都是最新的。 在这里难倒我的是弄清楚我可以更改什么，因为这是整个应用程序中唯一的模式对话框。

我欢迎任何想法。

编辑：

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

✔ 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();
}

(唉，去年夏天，当我最初开发这段代码时，我处理过同样的问题。如果我将延迟从 50 毫秒更改为 750 毫秒，代码工作正常。 我猜这是由于 {N} 5 的变化。 所以，它仍然是一个黑客，但我现在可以忍受它。

编辑 4/24

/2020：我为此开发了一个修复程序，并为本机脚本联系人创建了一个拉取请求 (#84(。 有关详细信息，请参阅问题 #75。