Question

我正在创建一个本机脚本应用程序，我希望我的标签View显示在iOS的顶部。我知道坚持顶部的tabView违反了人机界面指南，但我需要这样做。

Answer 1

你可以做到这一点。这是我如何完成类似的事情 -

<StackLayout row="0" col="0">
<StackLayout  *ngIf="visibility1" id="mainView" visibility="{{ visibility1 ? 'visible' : 'collapsed' }}">
    <FirstView></FirstView>
</StackLayout>
<StackLayout  *ngIf="visibility2" id="mainView" visibility="{{ visibility2 ? 'visible' : 'collapsed' }}">
    <SecondView></SecondView>
</StackLayout>
<StackLayout  *ngIf="visibility3" id="mainView" visibility="{{ visibility3 ? 'visible' : 'collapsed' }}">
    <ThirdView></ThirdView>
</StackLayout>
</StackLayout>

并根据点击事件更改每个组件的可见性。

Answer 2

您可以使用SegmentedBar实现TabView行为/布局的所有方式。见this answer for details

Answer 3

使用新的Nativescript 6，有一个名为“标签”的新组件，您可以执行此操作：

这是使用Nativescript angular的方法：

<Tabs selectedIndex="1" class="fas font-size">
    <!-- Using icon fonts for each TabStripItem -->
    <TabStrip>
        <TabStripItem title="Home"></TabStripItem>
        <TabStripItem title="Account"></TabStripItem>
        <TabStripItem title="Search"></TabStripItem>
    </TabStrip>

    <TabContentItem>
        <GridLayout>
            <Label text="Home Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Account Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <Label text="Search Page" class="h2 text-center"></Label>
        </GridLayout>
    </TabContentItem>

</Tabs>

Here是我创建的游乐场项目。

Here是一个操场示例，其中使用顶部和底部选项卡的Nativescript打字稿

Here，您可以找到文档

重要说明：此小部件当前处于测试版

我可以在Native Script中使用iOS选项卡视图吗？

3 个答案: