Question

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

NativeScript可以实现吗？使用以下代码（Angular 2），我最终会在两个选项卡上共享一个导航栏。只保留第二个（标题为“附近”）：

<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 title属性：

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

2 个答案: