如何在nativescript中自定义选项卡视图？

如何将选项卡视图项目停靠在屏幕左侧，如下图所示

这就是我当前的布局。

<TabView dock="left" tabsBackgroundColor="red" selectedIndex="1" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
    <StackLayout tabsBackgroundColor="red" *tabItem="{ iconSource: 'res://ic_ham'}" >
    </StackLayout>
    <StackLayout *tabItem="{title: 'Home'}">
            <ns-home></ns-home>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Bookings'}">
            <ns-booking></ns-booking>
    </StackLayout>
</TabView>

结果布局

---

对于您的需求来说，这可能有点过分，但我发现最简单的方法是通过禁用当前按钮和添加新选项卡按钮，将选项卡按钮更改为完全可设计和自定义的

<StackLayout class="grid-tab-view" columns="*,100,100,100,*" ios:rows="auto, auto" android:rows="auto, *">
    <label row="0" col="1" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)" [ngClass]="{'selected': tabSelectedIndex===0}"></label>
    <label row="0" col="2" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)" [ngClass]="{'selected': tabSelectedIndex===1}"></label>
    <label row="0" col="3" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)" [ngClass]="{'selected': tabSelectedIndex===2}"></label>
    <TabView colSpan="5" row="1" col="0" #tabView class="tab-view" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded()" (selectedIndexChanged)="onTabSwitch($event)">
      <StackLayout class="tab" *tabItem="{title: 'Tab1'}">
          <Label text="tab1 body"></Label>
      </StackLayout>
      <StackLayout class="tab" *tabItem="{title: 'Tab2'}">
          <Label text="tab2 body"></Label>
      </StackLayout>
      <StackLayout class="tab" *tabItem="{title: 'Tab3'}">
          <Label text="tab3 body"></Label>
      </StackLayout>
    </TabView>
</StackLayout>

代码：

• 为“何时选择按钮”添加tap事件处理程序，并为其提供自定义选定类（用于样式设置）
• 使用tabs loaded事件隐藏默认选项卡按钮：

onTabsLoaded（）：void{
让tabViewElement=this.tabView.nativeElement；
if（tabViewElement&&tabViewElement.android）{
tabViewElement.android.removeViewAt（0）；
}否则{
tabViewElement.ios.tabBar.hidden=true；
}
};

再加上一点css，我们的结果是：

---

希望这有帮助，祝你好运

对于您的需求来说，这可能有点过分了，但我发现最简单的方法是通过禁用当前按钮和添加新选项卡按钮，将选项卡按钮更改为完全可设计和自定义的

<StackLayout class="grid-tab-view" columns="*,100,100,100,*" ios:rows="auto, auto" android:rows="auto, *">
    <label row="0" col="1" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)" [ngClass]="{'selected': tabSelectedIndex===0}"></label>
    <label row="0" col="2" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)" [ngClass]="{'selected': tabSelectedIndex===1}"></label>
    <label row="0" col="3" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)" [ngClass]="{'selected': tabSelectedIndex===2}"></label>
    <TabView colSpan="5" row="1" col="0" #tabView class="tab-view" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded()" (selectedIndexChanged)="onTabSwitch($event)">
      <StackLayout class="tab" *tabItem="{title: 'Tab1'}">
          <Label text="tab1 body"></Label>
      </StackLayout>
      <StackLayout class="tab" *tabItem="{title: 'Tab2'}">
          <Label text="tab2 body"></Label>
      </StackLayout>
      <StackLayout class="tab" *tabItem="{title: 'Tab3'}">
          <Label text="tab3 body"></Label>
      </StackLayout>
    </TabView>
</StackLayout>

代码：

• 为“何时选择按钮”添加tap事件处理程序，并为其提供自定义选定类（用于样式设置）
• 使用tabs loaded事件隐藏默认选项卡按钮：

onTabsLoaded（）：void{
让tabViewElement=this.tabView.nativeElement；
if（tabViewElement&&tabViewElement.android）{
tabViewElement.android.removeViewAt（0）；
}否则{
tabViewElement.ios.tabBar.hidden=true；
}
};

再加上一点css，我们的结果是：

---

希望这有帮助，祝你好运

这不是我要找的，我只是想减少我的顶部标签视图的宽度，这样它就不会扩散到整个屏幕。如果你找不到如何简单地向左移动，这可能是一个解决方案。如果你能找到一个更简单的解决方案，请分享。另外，是否可以添加第三个选项卡，使其禁用和隐藏？如果这样做可能会带来你想要的结果这不是我想要的，我只是想减少顶部选项卡视图的宽度，这样它就不会扩散到整个屏幕。如果你找不到如何简单地向左移动，这可能是一个解决方案。如果你能找到一个更简单的解决方案，请分享。另外，是否可以添加第三个选项卡，使其禁用和隐藏？如果是这样，可能会产生您想要的结果创建布局，而不是选项卡视图，并提供与之类似的样式。在这种情况下如何处理手势？手势的意思是滑动以更改选项卡？是，如何处理？为其创建布局而不是选项卡视图，并提供与之类似的样式。在这种情况下如何处理手势？手势的意思是滑动以更改选项卡？是的，我如何处理？