NativeScript Vue模态中的navigationTo问题

Question

我试图在我的NativeScript Vue应用程序的模式中使用navigateTo()。

我的模态组件包装在<Frame>中，据我了解，如何使它成为导航控制器。但是，当我尝试导航到模态的子组件时，它实际上在主框架中的模态后面打开。

您可以在这里看到此行为：https://play.nativescript.org/?template=play-vue&id=azowAE&v=3

单击“打开模式”按钮，然后单击“显示子页面”按钮。似乎什么也没发生，但是如果您单击“关闭”按钮，则会看到该模态后面打开的子页面。

Answer 1

为了导航到模态中使用的框架，应使用$ navigateTo方法的第二个参数。这可以通过引用或ID引用帧。我发现最简单的方法是为模态中的框架赋予一个ID：

<Frame id="modal-frame">...</Frame>

然后您就可以在模式内部进行导航

this.$navigateTo(OtherComponent, {frame: 'modal-frame'});

注意，不要像CSS选择器那样在ID前面加上＃。只有id值。

有关代码参考，请参见：https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/plugins/navigator-plugin.js#L48

Answer 2

导致此问题的另一个原因是，模态导航到的子组件没有包装在<Page>标记中。

在将捕获添加到导航代码时，根据是否使用ref或id，它会出现以下错误。

this.$navigateTo(NewModal, {
  frame: "frame-id" // or "frame-ref"
}).catch(e => console.log(e));

“帧引用”会抛出TypeError: Cannot read property 'id' of undefined

“ frame-id”抛出TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function