Javascript 如何在nativescript中定义默认选项卡视图？

我使用CLI创建了一个新的nativescript项目，并选择了“选项卡导航”。我现在有默认的3个选项卡，但我找不到如何将默认/选定选项卡设置为最右侧/中间选项卡

我已经尝试过移动标签，因为总是最左边的标签先被加载

<TabView androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

试试这个

<TabView  [(ngModel)]="tabSelectedIndex"  androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

希望有帮助。

使用此代码

1。app.component.html:-

 <TabView  [(ngModel)]="tabSelectedIndex"  androidTabsPosition="bottom">

 <page-router-outlet
    *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
    name="homeTab">
 </page-router-outlet>

 <page-router-outlet
    *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
    name="browseTab">
 </page-router-outlet>

 <page-router-outlet
    *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
    name="searchTab">
 </page-router-outlet>

</TabView>

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
{
    path: "",
    redirectTo: "/(homeTab:home/default//browseTab:browse/default//searchTab:search/default)",
    pathMatch: "full"
},
{
    path: "home",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/home/home.module#HomeModule",
    outlet: "homeTab"
},
{
    path: "browse",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/browse/browse.module#BrowseModule",
    outlet: "browseTab"
},
{
    path: "search",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/search/search.module#SearchModule",
    outlet: "searchTab"
}
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
{
    path: "",
    redirectTo: "/(homeTab:home/default//browseTab:browse/default//searchTab:search/default)",
    pathMatch: "full"
},
{
    path: "home",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/home/home.module#HomeModule",
    outlet: "homeTab"
},
{
    path: "browse",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/browse/browse.module#BrowseModule",
    outlet: "browseTab"
},
{
    path: "search",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/search/search.module#SearchModule",
    outlet: "searchTab"
}
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }