在 NativeScript TabView 中隐藏选项卡按钮 [英] Hide Tab Buttons in NativeScript TabView

问题描述

我将 Nativescript 与 Typescript/Angular 一起使用，对于 iOS 和 Android，我想完全隐藏导航选项卡按钮，而不会丢失选项卡之间的滑动功能.

换一种说法:我想要标签内容，而不是按钮.

我愿意接受其他建议，以便在不使用标签导航菜单的情况下获得相同的功能.

我能找到的最接近的答案是:

解决方案

老问题，但也许其他人也遇到了这个问题，所以给出更多更新的答案.

Nativescript v6 引入了 Tabs(和 BottomNavigation)，旨在替换 TabView:https://nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components/

因此，使用 Tabs 的解决方案只是删除 TabStrip 部分，例如

<Tabs><标签内容项><网格布局><Label text="标签 1 的内容"/></网格布局></TabContentItem><标签内容项><网格布局><Label text="标签 2 的内容"/></网格布局></TabContentItem></标签>

I'm using Nativescript with Typescript/Angular and, for both iOS and Android, I'd like to hide the navigation tab buttons completely without losing the swipe functionality between the tabs.

Said another way: I want the tab content, but not the buttons.

I'm open to other suggestions to gain the same functionality without the tab navigation menu.

The closest answer I could find was this: NativeScript How to hide tab buttons from TabView

However, this answer didn't work. It caused the entire page to go white and none of the tab items appeared. It seemed as though the swipe functionality ceases to function as well.

Any ideas?

This is inside the html (not xml) file:

<TabView id="mainTab" selectedIndex="1">
    <StackLayout *tabItem="{ title: 'Tab 1' }">
        <app-page-one></app-page-one>
    </StackLayout>
    <StackLayout *tabItem="{ title: 'Tab 2' }">
        <app-page-two></app-page-two>
    </StackLayout>
    <StackLayout *tabItem="{ title: 'Tab 3' }">
        <app-page-three></app-page-three>
    </StackLayout>
</TabView>

解决方案

Old question but maybe someone else also hits this so giving more updated answer.

Nativescript v6 introduced Tabs (and BottomNavigation) with purpose to replace TabView: https://nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components/

So solution with Tabs is simply to remove the TabStrip portion, e.g.

<Tabs>
  <TabContentItem>
      <GridLayout>
          <Label text="Content for Tab 1" />
      </GridLayout>
  </TabContentItem>
  <TabContentItem>
      <GridLayout>
          <Label text="Content for Tab 2" />
      </GridLayout>
  </TabContentItem>
</Tabs>

这篇关于在 NativeScript TabView 中隐藏选项卡按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！