我可以在本机脚本中将 iOS 选项卡视图置于顶部吗?
Can I have the iOS Tab View on top in Native Script?
我正在创建本机脚本应用程序,我希望我的选项卡视图显示在 iOS 的顶部。我知道将 tabView 放在顶部违反了人机界面指南,但我需要这样做。
你可以做到的。这是我做类似事情的方式 -
<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>
并根据点击事件更改每个组件的可见性。
您可以使用 SegmentedBar 实现 TabView 的所有方式 behaviours/layouts。参见
在新的 Nativescript 6 中,有一个名为 "Tabs" 的新组件允许您执行此操作:
以下是使用 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 你可以找到文档
重要说明:此小部件目前处于测试阶段
我正在创建本机脚本应用程序,我希望我的选项卡视图显示在 iOS 的顶部。我知道将 tabView 放在顶部违反了人机界面指南,但我需要这样做。
你可以做到的。这是我做类似事情的方式 -
<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>
并根据点击事件更改每个组件的可见性。
您可以使用 SegmentedBar 实现 TabView 的所有方式 behaviours/layouts。参见
在新的 Nativescript 6 中,有一个名为 "Tabs" 的新组件允许您执行此操作:
以下是使用 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 你可以找到文档
重要说明:此小部件目前处于测试阶段