首页 文章

隐藏NativeScript TabView中的选项卡按钮

提问于
浏览 次
2

我正在使用带有Typescript / Angular的Nativescript，对于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>

Example page with the tabs I want to hide

tabs nativescript angular2-nativescript

2 回答

  • 0

    这样做的最好方法是以编程方式进行 . 请在https://github.com/NativeScript/nativescript-angular/issues/621处理此问题 .

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

    回复于
  • 1

    我有同样的问题，发现至少可以在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);
  }
}
    回复于

相关问题