How to navigate between screens/layouts in BottomBar?

nativescriptrocks
plugins

#1

Hi,

In Nativescript-bottombar, How to navigate between the bars/menus.

I have tried as follows,

app.component.html

<GridLayout *ngIf="condition" backgroundColor="green">
--page body--
</GridLayout>
<GridLayout [ngSwitch]="tabname" class="p-15 m-t-15" height="280" borderRadius="2">
 
    <GridLayout *ngSwitchCase="'calender'" backgroundColor="#8C489F">
    --page body--
    </GridLayout>
    <GridLayout *ngSwitchCase="'profile'" backgroundColor="#0077AF">
--page body--
</GridLayout>
    </GridLayout>
    <GridLayout *ngSwitchCase="'message'" backgroundColor="#FFFF66">
      --page body--</GridLayout>
    </GridLayout>

    <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)" [inactiveColor]="inactiveColor" [accentColor]="accentColor"uncoloredBackgroundColor="black"></BottomBar>

Test -1

app.component.ts

------------------
public tabname: string;
public condition: boolean;
------------------
tabSelected(args: SelectedIndexChangedEventData) {

Switch(args.newIndex){
case 0:
this.condition = true;
this.tabname = "";
 break;    
case 1:
this.condition = false;
this.tabname = "calender";
 break; 
case 2:
 this.tabname = "profile";
 break; 
 case 3:
 this.tabname = "message";
 break; 
}
    }

Test - 2

app.component.ts

tabSelected(args: SelectedIndexChangedEventData) {
Switch(args.newIndex){
case 0:
this.router.navigate(["/home"]);
break;
case 1:
this.router.navigate(["/calender"]);
break;
case 2:
this.router.navigate(["/profile"]);
break;
case 3:
this.router.navigate(["/message"]);
break;
} }

Upto my knowledge still i have tried above two ways, both way are affect the screen after the tabSelected event occured. If the particular screen layout contains 6 tabs in tabview means that time the tab bar changes will take 6 to 9 seconds to affect the layout. Its more time consuming in this case.

Please suggest with suitable way to handle navigation and bottombar screen’s body!

Thanks in advance.