如何在nativescript中自定义tabview？

Question

如何将我的Tabview项目停靠在屏幕左侧，如下图所示？

这是我的布局看起来像现在的样子。

<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> 

得到的布局

Answer 1

这可能有点矫枉过正的满足您的需求，但我已经找到了最简单的我们是改变标签按钮被完全通过禁用当前按钮和添加新的选项卡按钮来设计和定制。

<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> 

而在代码：

• 添加自来水事件处理程序时，选择按钮，并给它一个自定义选择类（造型）
• 隐藏使用选项卡中的默认选项卡按钮加载事件：

onTabsLoaded(): void{ 
    let tabViewElement = <TabView>this.tabView.nativeElement; 
    if (tabViewElement && tabViewElement.android) { 
     tabViewElement.android.removeViewAt(0); 
    } else { 
     tabViewElement.ios.tabBar.hidden = true; 
    } 
}; 

℃并用了CSS，我们的结果是：

希望这会有所帮助，祝你好运！