1

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

在此处输入图像描述

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

2 回答 2

0

我通过查看源代码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创建新实例时，的构造函数将最顶层对象TabView的实例替换为自身actionBarpage。

对于我的应用程序，我将确保标签栏仅在最顶层页面上可见，这样可以避免上述问题。

于 2016-06-18T12:33:32.053 回答
0

我无法让它与SelectedIndexValueAccessor指令一起使用，所以我调整了另一个解决方案，希望有人觉得它有用：

主页.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}`);
    }
}
于 2017-08-05T10:15:44.340 回答