TabStrip和TabStripItem不能在iOS和Android上使用CSS设置样式

问题描述

我无法使用CSS为BottomNavigations TabStrip和TabStripItem设置填充，边距和对齐方式。

//css file

TabStrip {
  background-color: #001a31;
  selected-item-color: white;
  un-selected-item-color: white;
}

.activeTab {
  color: white;
  font-size: 13;
  font-family: 'SF-UI-Text-Bold','SF UI Text';
}

.nonActiveTab {
  color: white;
  font-size: 13;
  font-family: 'ITCAvantGardeStd-Bk','ITC Avant Garde Gothic Std';
}

TabStripItem  {
  margin-top: 5;
  }

 <BottomNavigation #bt (selectedindexChanged)="onTap(bt.selectedindex)">
    <TabStrip isIconSizefixed='false' iosIconRenderingMode="alwaysOriginal">
        <TabStripItem   >
            <Label text='HOME' class="activeTab"  [ngClass]="{'activeTab':(0==(bt.selectedindex||0)),'nonActiveTab':(0!=bt.selectedindex)}"></Label>
            <Image src="res://home_tab" ></Image>
        </TabStripItem>
        <TabStripItem >
            <Label text='MY GaraGE'  [ngClass]="{'activeTab':(1==bt.selectedindex),'nonActiveTab':(1!=bt.selectedindex)}"></Label>
            <Image src="res://home_tab" ></Image>
        </TabStripItem>
        <TabStripItem >
            <Label text='ACCOUNT' [ngClass]="{'activeTab':2==bt.selectedindex,'nonActiveTab':(2!=bt.selectedindex)}"></Label>
            <Image src="res://account" ></Image>
        </TabStripItem>
    </TabStrip>

    <TabContentItem>
        <GridLayout>
            <router-outlet name="home-outlet"></router-outlet>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <router-outlet name="garage-outlet"></router-outlet>
        </GridLayout>
    </TabContentItem>
    <TabContentItem>
        <GridLayout>
            <router-outlet name="account-outlet"></router-outlet>
        </GridLayout>
    </TabContentItem>
    </BottomNavigation>

它在android上可以正常工作，可以给tabstrip设置高度。但是css对IOS的影响只有着色。

上面的屏幕截图来自IOS设备iphone 6

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）