如何在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>

并在代码中：

• 为选择按钮的时间添加点击事件处理程序，并为其自定义选择类（用于样式设置）
• 使用选项卡加载事件隐藏默认的选项卡按钮：

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

和一点点的CSS，我们的结果：

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