Tabs 在NativeScript选项卡视图中隐藏选项卡按钮

Tabs 在NativeScript选项卡视图中隐藏选项卡按钮,tabs,nativescript,angular2-nativescript,Tabs,Nativescript,Angular2 Nativescript,我将Nativescript与Typescript/Angular一起使用,对于iOS和Android,我希望完全隐藏导航选项卡按钮,而不会丢失选项卡之间的滑动功能 另一种说法是:我想要的是标签内容,而不是按钮 我愿意接受其他建议,以便在没有选项卡导航菜单的情况下获得相同的功能 我能找到的最接近的答案是: 然而,这个答案不起作用。它导致整个页面变为白色,并且没有任何选项卡项出现。似乎刷卡功能也停止了 有什么想法吗 这在html(非xml)文件中: 实现这一点的最佳方法是按程序进行。请在这里讨

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

另一种说法是:我想要的是标签内容,而不是按钮

我愿意接受其他建议,以便在没有选项卡导航菜单的情况下获得相同的功能

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

然而,这个答案不起作用。它导致整个页面变为白色,并且没有任何选项卡项出现。似乎刷卡功能也停止了

有什么想法吗

这在html(非xml)文件中:



实现这一点的最佳方法是按程序进行。请在这里讨论这个问题


只需以编程方式创建选项卡,然后就可以控制它们了。一旦选项卡从UI添加到树中,您就无法从层次结构中删除它们。

我也遇到了同样的问题,并找到了一个在android上运行的解决方案至少,也许有人可以提供一个iOS解决方案。您需要对选项卡视图进行注释,以便可以访问底层的Android组件,就像我对#Main选项卡视图所做的那样

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

这是一个老问题,但也许其他人也会问这个问题,所以给出更多更新的答案

Nativescript v6引入了选项卡(和底部导航),旨在取代TabView:

因此,使用Tab的解决方案只是移除TabStrip部分,例如

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

等等,我不想删除选项卡的内容。只有选项卡按钮。我更新了帖子,以便更清楚地了解这一点。
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);
  }
}
<Tabs>
  <TabContentItem>
      <GridLayout>
          <Label text="Content for Tab 1" />
      </GridLayout>
  </TabContentItem>
  <TabContentItem>
      <GridLayout>
          <Label text="Content for Tab 2" />
      </GridLayout>
  </TabContentItem>
</Tabs>