NativeScript TabView上的覆盖按钮？答案

【问题标题】：Overlay button on NativeScript TabView?NativeScript TabView上的覆盖按钮？
【发布时间】：2018-10-02 03:13:03
【问题描述】：

我有一个简单的 TabView，像这样使用 NativeScript w/angular：

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

我希望标签栏中的按钮不会改变视图，而是做其他事情（例如打开模式对话框）。

我在<TabView> 的内部和外部都尝试了一个新的<StackLayout>。

我也尝试使用<AbsoluteLayout>. 所有方法都导致应用崩溃。

是否可以使用selectedIndexChanged 捕获标签视图更改并阻止更改？

我在活动中尝试了stopPropagation()，但出现错误： Property 'stopPropagation' does not exist on type 'SelectedIndexChangedEventData'.

我尝试将视图更改回单击中间按钮时存在的视图，但是会出现明显的闪烁，因为在触发此事件之前必须更改视图。可以接受的是 onSelectedIndexWill Change，但该方法不存在。

 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.
            });
        }
    }

或者有没有其他方法可以在标签栏中合并一个不链接到新视图的按钮？

或者我不应该实现一个原生的标签栏，而是从头开始创建一个导航栏？

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.

【问题讨论】：

所以基本上你想要在标签栏中有一个额外的标签按钮。但不想激活该选项卡只点击？我说的对吗？
对。我正在研究本机 API，并认为捕获 UITabBarController shouldSelect 可能是一种方法。想想 Instagram，标签栏中的中心按钮 (+) 只是打开一个模式。
尝试在选择指定选项卡时将选项卡索引更改为其他索引而不设置动画，并在选项卡单击时执行您想要执行的工作。我会给你需要的类似效果。
playground demo 没有绑定onSelectedIndexChanged
@bhavinjalodara 我不明白这怎么可能，尤其是使用 Angular 版本的 TabView。您不能指定单个索引，我也没有看到任何有关动画选项卡更改的文档。我错过了什么吗？

标签： ios objective-c angular nativescript

【解决方案1】：

请注意 NativeScript 团队拒绝 export the delegates 的事实，这不是你现在可以修补的东西。唯一的方法是 fork TabView 代码并使用它创建您自己的插件。

但是，一旦您有了分叉副本，进行此更改应该相当简单。你只需要在第 64 行左右public tabBarControllerShouldSelectViewController(tabBarController: UITabBarController, viewController: UIViewController): boolean { 你只需要检测它试图加载哪个viewController；然后在您不想实际更改视图的情况下返回 false 。 ;-)

两种可能的方式；

检查owner.selectedIndex；我认为此时它应该指向正确的新索引；
但是，如果不是，那么第二种可能的方法是检查 viewController 与所有者视图控制器列表（即 const selectedIndex = owner._ios.viewControllers.indexOfObject(viewController);）

【讨论】：