Как определить TabView по умолчанию в nativescript? - PullRequest
Новая
       14

Как определить TabView по умолчанию в nativescript?

1 голос
/ 04 мая 2019

Я создал новый проект nativescript с помощью CLI и выбрал «вкладку навигации».Теперь у меня есть 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>

Ответы [ 2 ]

1 голос
/ 23 июля 2019

Используйте этот код.

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>

2. app-routing.module.ts: - 

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 { }
1 голос
/ 04 мая 2019

попробуйте 

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

и в вашем файле ts: 

 public tabSelectedIndex: number=1; //for example

надеюсь, это поможет.

...