Nativescript Vue Actionbar 复制 Android答案

【问题标题】：Nativescript Vue Actionbar Duplicated AndroidNativescript Vue Actionbar 复制 Android
【发布时间】：2019-05-03 13:59:11
【问题描述】：

我正在使用 Nativescript-Vue 并且无法弄清楚如何删除默认出现在 Android 中的带有应用程序名称的 ActionBar（在 iOS 中它不会出现）。有任何想法吗？

如果我在模板中添加一个新的<ActionBar />，它会显示在我无法删除的“默认”ActionBar 下方。

如果我在 <Page /> 标记中使用 actionBarHidden="true"，则无法添加自定义 ActionBar。

该项目是使用vue init nativescript-vue/vue-cli-template <project-name> 构建的，它与本示例具有基本相同的配置（manifest.xml 和其他 App_Resources）：https://github.com/tralves/groceries-ns-vue/tree/master/app/App_Resources

我正在使用多个这样的框架，也许这与问题有关：

<Page>
 <TabView androidTabsPosition="bottom" iosIconRenderingMode="alwaysOriginal" @selectedIndexChange="showComponent">
  <TabViewItem title="Servicios" iconSource="res://ic_person_outline_18pt">
    <Frame id="services">
      <Categories />
    </Frame>
  </TabViewItem>

  <TabViewItem title="Citas" iconSource="res://ic_date_range_18pt">
    <Frame id="bookings">
      <Bookings v-if="show_bookings" />
    </Frame>
  </TabViewItem>

  <TabViewItem title="Carrito" iconSource="res://ic_shopping_basket_18pt">
    <Frame id="cart">
      <Cart v-if="show_cart" />
    </Frame>
  </TabViewItem>
 </TabView>
</Page>

在每个组件（类别、预订、购物车）中，我正在渲染特定的 ActionBar。

此图显示问题，应用名称为 Ameiz：

Double ActionBar Issue - Android

谢谢。-

【问题讨论】：

您可以直接为 ActionBar 设置标题，或者当您放置自定义标题视图时，默认的应用名称将消失。如果您使用多个框架，请确保将一个隐藏在正确的框架中。
感谢@Manoj，我尝试直接设置标题，但带有应用名称的默认 ActionBar 仍然存在。也许它与多个框架有关，但我不知道可能是什么问题，因为我只在用户单击 TabViewItem 后才呈现框架中的内容。我将用更多细节编辑我的问题。谢谢！

标签： android nativescript nativescript-vue

【解决方案1】：

每个页面都有自己的操作栏。由于 Page 是 TabView 的父级，并且每个选项卡都有自己的 Frame 和 Page，因此您会在那里获得 2 个 ActionBar。

在 TabView 的父 Page 上设置 actionBarHidden="true"。如果您仍然遇到问题，请分享一个可以重现问题的 Playground 示例。

【讨论】：

谢谢！我通过将 Page 注入到我的构造函数中，将它放在我的选项卡路由组件中！
嗨@Petey，虽然我没有使用多个框架，但我遇到了类似的问题。我在自己的组件中声明了我的 ActionBar，然后将其包含在 RadSideDrawer 的内容中。不幸的是，我得到了重复的 ActionBar，如果我添加 actionBarHidden="true" 它会隐藏我声明的自定义 ActionBar。您能否解释一下您是如何实现修复的？对于 NativeScript 和 Vue，我还是有点陌生。