Скрыть кнопки вкладок в NativeScript TabView

Я использую Nativescript с Typescript / Angular, и как для iOS, так и для Android я хотел бы полностью скрыть кнопки вкладок навигации, не теряя при этом функциональность смахивания между вкладками.

Другими словами: мне нужно содержимое вкладки, но не кнопки.

Я открыт для других предложений, чтобы получить ту же функциональность без меню навигации по вкладкам.

Ближайший ответ, который я смог найти, был следующий: NativeScript Как скрыть кнопки вкладок из 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>

Пример страницы с вкладками, которые я хочу скрыть


nativescript tabs angular2-nativescript
person razorsyntax    schedule 14.04.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Старый вопрос, но, возможно, кто-то другой также задает этот вопрос, поэтому дает более обновленный ответ.

Nativescript v6 представил вкладки (и BottomNavigation) с целью замены TabView: https://nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components/

Таким образом, решение с вкладками - просто удалить часть TabStrip, например.

<Tabs>
  <TabContentItem>
      <GridLayout>
          <Label text="Content for Tab 1" />
      </GridLayout>
  </TabContentItem>
  <TabContentItem>
      <GridLayout>
          <Label text="Content for Tab 2" />
      </GridLayout>
  </TabContentItem>
</Tabs>
person Theuns Alberts    schedule 11.06.2020

arrow_upward
1
arrow_downward

Лучший способ сделать это - сделать это программно. Взгляните на эту проблему здесь, на странице https://github.com/NativeScript/nativescript-angular/issues/621.

Просто создайте вкладки программно, а затем вы сможете управлять ими. Вы не можете удалить вкладки из иерархии, если они добавлены в дерево из пользовательского интерфейса.

person Idrees Khan    schedule 16.04.2018
comment
Подождите, я не хочу удалять содержимое вкладок. Просто кнопки вкладок. Я обновил пост, чтобы прояснить это. - person razorsyntax; 21.04.2018

arrow_upward
1
arrow_downward

У меня была такая же проблема, и я нашел решение, которое работает, по крайней мере, на Android, может быть, кто-то может предоставить решение для iOS. Вам нужно аннотировать TabView, чтобы вы могли получить доступ к базовому компоненту Android, как я сделал с #mainTabView

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

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);
  }
}
person Paul Weber    schedule 28.03.2019