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 doctor没有显示错误，并且所有代码都是最新的。让我感到困扰的是我想知道我可以更改什么，因为这是整个应用程序中唯一的模式对话框。

我欢迎任何想法。

编辑：

我尝试了一个类似但较旧的应用程序，并且相同的模式对话框在这里按预期工作。但是，它正在运行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上的“通讯录”应用返回的计时问题。这就是这段代码的原因：

$option[93]

（可惜，去年夏天，当我最初开发此代码时，我曾处理过同样的问题。）如果我将延迟从50ms更改为750ms，该代码可以正常工作。我猜这是由于{N} 5中的更改引起的。因此，它仍然是一个hack，但是我现在可以接受。

NativeScript JavaScript模式对话框在iOS上因ViewHierarchy错误而失败

1 个答案: