NativeScript 和每个选项卡的单独 NavigationBar (ActionBar)

Question

我正在尝试在我的 NativeScript 应用程序中实现 UI，该应用程序有 2 个选项卡，每个选项卡都有自己的导航堆栈。在一些应用程序中可以看到类似的模式，例如照片应用程序。这是一个演示：

NativeScript 可以吗？使用以下代码 (Angular 2)，我最终得到了两个选项卡共享的单个导航栏。只保留第二个（title Nearby）：

<TabView>
  <StackLayout *tabItem="{ title: 'Home' }">
    <ActionBar title="Home"></ActionBar>
    <mp-home></mp-home>
  </StackLayout>
  <StackLayout *tabItem="{ title: 'Nearby' }">
    <ActionBar title="Nearby"></ActionBar>
    <Label text="Placeholder for Nearby"></Label>
  </StackLayout>
</TabView>

Answer 1

我通过查看 nativescript-angular 的源代码发现有一个 SelectedIndexValueAccessor 指令添加了对 ngModel 到 TabView 组件的支持。它将选项卡的 ngModel 值同步到 selectedIndex，这意味着我们可以使用以下代码更新 ActionBar 标题属性:

<TabView [(ngModel)]="selectedTabIndex">

  <ActionBar
   [title]="selectedTabIndex === 0 ? homeTab.title : nearbyTab.title">
  </ActionBar>

  <StackLayout *tabItem="homeTab">
    <mp-home></mp-home>
  </StackLayout>

  <StackLayout *tabItem="nearbyTab">
    <Label text="Placeholder for Nearby"></Label>
  </StackLayout>

</TabView>

可行，但这仍然意味着我们只有一个 ActionBar（iOS 导航栏）。如果您尝试构建一个每个选项卡都有自己的导航堆栈的 UI，那么这并不理想，但是从查看 TabView 组件的源代码来看，它似乎是这样工作的: 每次创建新的 TabView 实例时，the constructor of TabView replaces the instance of the actionBar on the topmost page object with itself.

对于我的应用程序，我将确保选项卡栏仅在最顶部的页面上可见，以避免出现上述问题。

Answer 2

我无法让它与 SelectedIndexValueAccessor 指令一起工作，所以我改编了另一个 solution，希望有人觉得它有用：

mainPage.html:

<ActionBar [title]="tabs[tabId].title" class="action-bar"></ActionBar>

<GridLayout>
    <TabView #tabview (selectedIndexChanged)="tabIndexChanged($event)">

      <StackLayout *tabItem="tabs[0]" >
          <first-tabview-item></first-tabview-item>
      </StackLayout>

      <StackLayout *tabItem="tabs[1]">
          <second-tabview-item></second-tabview-item>
      </StackLayout>

      <StackLayout *tabItem="tabs[2]">
          <third-tabview-item></third-tabview-item>
      </StackLayout>

    </TabView>
</GridLayout>

mainPage.component.ts:

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "main-page",
    moduleId: module.id,
    templateUrl: "./mainPage.html",
    styleUrls: ["./mainPage-common.css", "./mainPage.css"],
})
export class MainPageComponent implements OnInit {
    private tabs: object[];
    private tabId: number;

    constructor() { }

    public ngOnInit(): void {

        this.tabs = [
            {
                title: 'Tab 1 title',
                iconSource: '~/images/tab1.png',
            },
            {
                title: 'Tab 2 title',
                iconSource: '~/images/tab2.png',
            },
            {
                title: 'Tab 3 title',
                iconSource: '~/images/tab3.png',
            },
        ];

    }

    public tabIndexChanged(event: any) {
        this.tabId = event.newIndex;
        console.log(`Selected tab index: ${event.newIndex}`);
    }
}

NativeScript 和每个选项卡的单独 NavigationBar (ActionBar)

NativeScript and a separate NavigationBar (ActionBar) for each tab

nativescript

angular2-nativescript