I have a simple TabView like this using NativeScript w/angular:
I tried a new
I also tried using an
Is it possible to capture the tab view change using
I tried
I tried changing the view back to the view that existed when the middle button was clicked, but there is a noticeable flicker because the view has to change before this event is even fired. What would have been acceptable is something like
Or should I not implement a native tab bar and instead just create a navigation bar from scratch?
Here's how it can be done for ios.
Here is a sample app in NativeScript playground showing the issue. Click center link to see the flicker.
from Overlay button on NativeScript TabView?
<TabView [(ngModel)]="tabSelectedIndex" height="300px" (selectedIndexChanged)="onSelectedIndexChanged($event)">
<StackLayout *tabItem="{title: 'Tab 1'}">
<Label text="Content in Tab 1"></Label>
</StackLayout>
<StackLayout *tabItem="{title: 'Button 1'}">
<!-- these won't be content here because clicking this should not change to a another tab,
but instead should do something else. -->
</StackLayout>
<StackLayout *tabItem="{title: 'Tab 2'}">
<Label text="Content in Tab 2"></Label>
</StackLayout>
</TabView>
I want a button in the tab bar that doesn't change the view, but instead does something else (such as open a modal dialog).I tried a new
<StackLayout>
both inside and outside of <TabView>
.I also tried using an
<AbsoluteLayout>.
All methods caused the app to crash.Is it possible to capture the tab view change using
selectedIndexChanged
and prevent the change?I tried
stopPropagation()
on the event but got error: Property 'stopPropagation' does not exist on type 'SelectedIndexChangedEventData'.
I tried changing the view back to the view that existed when the middle button was clicked, but there is a noticeable flicker because the view has to change before this event is even fired. What would have been acceptable is something like
onSelectedIndexWill Change
but that method does not exist. onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
if (args.newIndex === 1) { //the middle button
setTimeout(() => {
tabView.selectedIndex = args.oldIndex; //go back to the previous view (causes flicker)
//do stuff for the button click.
});
}
}
Or is there another way to incorporate a button in the tab bar that doesn't link to a new view?Or should I not implement a native tab bar and instead just create a navigation bar from scratch?
Here's how it can be done for ios.
Here is a sample app in NativeScript playground showing the issue. Click center link to see the flicker.
from Overlay button on NativeScript TabView?
No comments:
Post a Comment