Nativescript-vue原生iOS导航按钮在ActionBar上设置标题后消失

Posted 2023-04-14

【中文标题】Nativescript-vue原生iOS导航按钮在ActionBar上设置标题后消失

【英文标题】：Nativescript-vue native iOS Navigation button disappears after setting title on ActionBar

【发布时间】：2019-08-08 19:13:15

【问题描述】：

当我只使用普通的 ActionBar 时：

<ActionBar/>

当我改变路线时：

this.$navigateTo(Catalog)

原生ios后退按钮正常出现， 但是当我像这样更改操作栏时：

<ActionBar title="some title"/>

或像这样将其他元素放在操作栏中：

<ActionBar>
    <NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
<ActionBar/>

默认的原生ios后退按钮消失。

我最终需要的是带有自定义标题的默认 ios 操作栏和当我在组件之间导航时出现的原生 ios 后退按钮。请帮忙，提前谢谢！

【参考方案1】：

解决了我的问题。我在我的主要组件中使用 ActionBar（其中定义了选项卡）。相反，我将它从我的主要组件中删除，并为每个组件添加了自己的 ActionBar。这解决了问题。现在默认的 ios 后退按钮可以与任何其他参数组合或嵌套元素正确显示，无论您是否路由到相同组件的框架都没有关系。

【讨论】：

遇到了同样的问题，如果您使用的是 Frames，请在每个 Frame 中使用一个 ActionBar。

【参考方案2】：

我无法最终重现该问题，当我使用上面的确切代码 sn-p 时，NavigationButton 仍然可见，并使用 iOS v12.1.4 进行了测试。如果您仍有问题，请分享 Playground 示例。

但是，您将无法修改 iOS 上的点击处理程序，如 docs 中所述。

在 iOS 中，后退按钮明确用于导航。它 导航到上一页，您无法处理点击事件 覆盖此行为。

如果你想在 ActionBar 的左侧放置一个按钮并且 处理点击事件（例如，显示滑出），您可以使用 ActionItem 与 ios.position="left"。

【讨论】：

您好，感谢您的回复，这里：play.nativescript.org/?template=play-vue&id=ig4tRt&v=2我在操场上复制了该应用程序，请查看目录选项卡（第二个选项卡）并尝试点击任何类别以转到子目录组件，标题出现了，而后退按钮 - 没有出现。

我在您的示例中没有看到 NavigationButton 代码 sn-p。

play.nativescript.org/?template=play-vue&id=ig4tRt&v=4 添加了 NavigationButton，但正如我之前所说，它没有任何作用，ios 本身默认添加返回按钮。例如，如果您删除标题并只留下没有嵌套元素的 ActionBar，它本身会添加导航按钮并且它会起作用。

根据您的应用设计，我认为您在使用标签导航时甚至不需要根级别的框架。也没有实际需要 NavigationButton ，因为您的所有框架在历史记录中都只有一页。当您点击返回按钮时，没有任何内容可返回。

嗯，重点是 - 我需要在每个选项卡内进行路由。我不确定我选择的应用程序设计是否良好，但据我所知，如果我不向操作栏添加其他元素，后退按钮会正常显示，并且当我转到不同的组件时它会出现，即来自目录-> 子目录-当我按下后退按钮时，它会根据需要返回到目录。问题是 - 我想在操作栏上添加标题，然后它会破坏后退按钮的外观......你能否指出我的网上商店应用程序的示例，它具有类似标签的路由？