在 NativeScript TabView 中隐藏选项卡按钮答案

【问题标题】：Hide Tab Buttons in NativeScript TabView在 NativeScript TabView 中隐藏选项卡按钮
【发布时间】：2018-04-14 14:31:06
【问题描述】：

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

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

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

我能找到的最接近的答案是： NativeScript How to hide tab buttons from TabView

但是，这个答案不起作用。它导致整个页面变白，并且没有出现任何选项卡项。滑动功能似乎也不再起作用了。

有什么想法吗？

这是在 html（不是 xml）文件中：

<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>

【问题讨论】：

标签： tabs nativescript angular2-nativescript

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

执行此操作的最佳方法是以编程方式进行。在https://github.com/NativeScript/nativescript-angular/issues/621 上查看此问题。

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

【讨论】：

等等，我不想删除标签的内容。只是标签按钮。我更新了帖子以更清楚地说明这一点。

【解决方案3】：

我遇到了同样的问题，并找到了至少适用于 android 的解决方案，也许有人可以提供 iOS 解决方案。您需要对 TabView 进行注释，这样您就可以像使用 #mainTabView 一样访问底层 Android 组件

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

然后，在组件中你可以引用这个元素，访问内部的tabView并使用android原生调用来隐藏它。

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);
  }
}

【讨论】：