在 NativeScript TabView 中隐藏 Tab 按钮 [英] 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 部分,例如
<TabContentItem><网格布局><Label text="标签 1 的内容"/></GridLayout></TabContentItem><TabContentItem><网格布局><Label text="标签 2 的内容"/></GridLayout></TabContentItem></Tabs>
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 中隐藏 Tab 按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!