在TabView中使用Frame标签时,如何排除ActionBar?

时间:2019-04-26 03:44:34

标签: javascript css nativescript

我的问题

我在特定页面上使用了一个简单的TabView。

<Page class="page" navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd">

    <ActionBar class="action-bar">
        <!-- 
        Use the NavigationButton as a side-drawer button in Android
        because ActionItems are shown on the right side of the ActionBar
        -->
        <NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
        <!-- 
        Use the ActionItem for IOS with position set to left. Using the
        NavigationButton as a side-drawer button in iOS is not possible,
        because its function is to always navigate back in the application.
        -->
        <ActionItem icon="res://navigation/menu" android:visibility="collapsed"
            tap="onDrawerButtonTap" ios.position="left">
        </ActionItem>
        <Label class="action-bar-title" text="Browse"></Label>
    </ActionBar>

    <TabView androidTabsPosition="bottom">
        <TabViewItem title="first tab">
            <Frame defaultPage="home/home-page"></Frame>
        </TabViewItem>
        <TabViewItem title="2222 tab">
            <Frame defaultPage="search/search-page"></Frame>
        </TabViewItem>
    </TabView>

</Page>

如您所见,当我们到达此页面时,我们将看到底部的标签。但是,当我们单击其中一个选项卡时,就会发生问题。

正在发生的事情是,它正在导入整个页面,包括标题栏。

错误截图

Title Bar Erroneously Imported

理想解决方案

我希望能够使用Frame标记将页面导入到TabView中,但这样做时要排除ActionBar。

当我们直接导航到页面时,我确实想显示操作栏。

这可能吗?如果是这样,您能指出我正确的方向吗?这是我的代码惨败...

Online Demo in Playground

感谢您的光临, 约翰

1 个答案:

答案 0 :(得分:1)

您可以在不想显示操作栏的actionBarHidden上将false属性设置为Page

如果您不想在整个Frame上使用操作栏,请在actionBarVisibility本身上将never设置为Frame

    <TabView>
        <TabViewItem title="first tab">
            <Frame defaultPage="home/home-page" actionBarVisibility="never"></Frame>
        </TabViewItem>
        <TabViewItem title="2222 tab">
            <Frame defaultPage="search/search-page" actionBarVisibility="never"></Frame>
        </TabViewItem>
    </TabView>

Updated Playground