如何减少Nativescript BottomNavigation选项卡的图标大小

问题描述

我想减小NativeScript BottomNavigation中每个选项卡图标的大小。下面是我的HTML的一部分

      <TabStrip  iosIconRenderingMode="alwaysOriginal" >
        <TabStripItem horizontalAlignment='center' iconSource="res://home_tab" iconClass="img" >
            <Label text='Home'></Label>
            <Image src="res://home_tab" class="img" ></Image>
        </TabStripItem>
        <TabStripItem >
            <Label text='Garage'></Label>
            <Image src="res://home_tab" class="img" ></Image>
        </TabStripItem>
        <TabStripItem >
            <Label text='Account'></Label>
            <Image src="res://home_tab" class="img"></Image>
        </TabStripItem>
    </TabStrip>

<style  scoped>
    .img {
      height: 5;
      width: 5;
     }

    TabStrip{
     background-color: #001A31;
     height: 83;
     padding-top: 23;
    }

    TabStripItem{
     flex-direction: column;
     justify-content: center;
     margin-top: 5;
     background-color: blue;
    }

    Label {
     color:white;
     font-size: 13;
    }

</style>
     

但是它不会减小图标的大小，而且我可以更改标签文本的大小。请帮忙。

解决方法

资源图像从设备属性中获取正确大小的版本。

您最好使用<Image src="res://home_tab" height="5" width="5" stretch="none" />

---

在

中检查 ImageSource模块的文档

https://github.com/nodejs/node-addon-api/blob/master/doc/buffer.md#new-2

,

尝试提供isIconSizeFixed，其默认值为true

<TabStrip iosIconRenderingMode="alwaysOriginal" isIconSizeFixed="false">