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

问题描述

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

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.

我能找到的最接近的答案是: NativeScript如何从TabView隐藏标签按钮

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.

有什么想法吗?

这在html(不是xml)文件中:

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>

推荐答案

我遇到了同样的问题，并且发现了至少可以在android上运行的解决方案，也许有人可以提供iOS解决方案.您需要注释TabView，以便可以像使用#mainTabView

I had the same problem and found a solution that works on android at least, maybe somebody can provide an iOS solution. You need to annotate the TabView so you can access the underlying Android component like i did with #mainTabView

<TabView #mainTabView androidTabsPosition="bottom">
  <GridLayout *tabItem="{iconSource: 'res://ur_news', title: 'Home'}">
    <Label text="Tab 1"></Label>
  </GridLayout>
  [...]
</TabView>

然后，您可以在组件中引用此元素，访问内部的tabView并使用android native调用将其隐藏.

Then, in the component you can reference this element, access the internal tabView and use android native calls to hide it.

import { Component, ElementRef } from '@angular/core';

[...]

// angular will inject a reference to the native implementation here, we can use it
@ViewChild('mainTabView') containerRef: ElementRef;

[...]

protected handleAndroidFullscreenMode(isFullscreen: boolean): void {
  // wait a little bit until calling this - if it is empty it might not yet be there
  // fetch the underlying nativeElement 
  const tabView = this.containerRef.nativeElement as TabView;
  if(!tabView) {
    console.log("native element not yet initialized");
    return;
  }

  // the tabLayout contains the buttons we want to hide
  const tabLayout = tabView.nativeView.tabLayout;
  if(!tabLayout) {
    console.log("No tab layout");
    return;
  }

  // use native android methods to hide them
  if(isFullscreen) {
    tabLayout.setVisibility(android.view.View.GONE);
  } else {
    tabLayout.setVisibility(android.view.View.VISIBLE);
  }
}

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