Nativescript Angular TabStrip可见性设置为折叠仍然占用空间答案

【问题标题】：Nativescript Angular TabStrip Visibility set to collapse still take up spaceNativescript Angular TabStrip可见性设置为折叠仍然占用空间
【发布时间】：2020-03-31 10:40:20
【问题描述】：

我有一个导航选项卡，如下所示。我希望隐藏 tabStrip 并将可见性设置为折叠完成了这项工作。然而隐藏的 tabStrip 仍然占据了该区域的空白区域。有什么想法可以完全摆脱空白吗？

<Tabs selectedIndex="0" tabsPosition="top" >

    <TabStrip [visibility]="hideTab() ? 'visible' : 'collapse'">
        <TabStripItem class="special">
            <Label text="test"></Label>
        </TabStripItem>
    </TabStrip>

    <TabContentItem>
    </TabContentItem>
</Tabs>

【问题讨论】：

您隐藏的是选项卡，而不是选项卡栏。我怀疑该组件是否支持这一点。您可能必须在 iOS 调用 yourComponentInstance.viewController.tabBar.hidden = true 时以本机方式隐藏它。
我试过了，但视图中仍然存在空白
请分享 Playground 示例。
play.nativescript.org/?template=play-ng&id=oLdbvO - 对于IOS

标签： javascript angular nativescript nativescript-angular

【解决方案1】：

为了在 iOS 上隐藏 TabBar，您需要在内容加载后调整框架大小。

onTabViewLoaded(tabView) {
    const viewController = tabView.viewController,
        tabBar = viewController.tabBar;

    tabBar.frame = CGRectMake(tabBar.frame.origin.x, tabBar.frame.origin.y, tabBar.frame.size.width, 0);
}

Playground Sample

【讨论】：

感谢您的回复。但是我在操场上尝试过，标签栏仍然存在。截图 - imgur.com/eL3fJO2
它在第一次运行时工作，看起来它与事件周期有问题。使用 layoutChanged 而不是加载的事件似乎可以解决问题。
谢谢！这对我很有帮助。赞赏
还有一个问题，如果我们有多个tabstripitem和tabcontent，解决方法是一样的吗？
是的，应该是。每当内容更新时，框架都会在内部设置帧大小，布局更改事件会帮助您每次都覆盖它。