时间戳

首页 > 解决方案 > NativeScript Core：我正在尝试更改 TabViewItem 图标的大小，但无法弄清楚

javascript - NativeScript Core：我正在尝试更改 TabViewItem 图标的大小，但无法弄清楚

问题描述

我在我的 NativeScript 项目中的每个选项卡中添加图标，并且我正确引用了 png 图像，但是我的图像有点过大。我正在尝试添加样式，但无法弄清楚如何正确引用事物。我正在使用 iconSource 来引用我的图标。

我尝试将字体大小更改为 TabView，我尝试调整图像大小，我也尝试添加填充，但没有任何效果。

    <TabViewItem title="Routes" ios:iconSource="res://tabIcons/subway" android:iconSource="res://home">
        <Frame defaultPage="home/home-items-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Map" ios:iconSource="res://tabIcons/map" android:iconSource="res://browse">
        <Frame defaultPage="browse/browse-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Favorites" ios:iconSource="res://tabIcons/heart" android:iconSource="res://search">
        <Frame defaultPage="search/search-page"></Frame>
    </TabViewItem>

    <TabViewItem title="Settings" ios:iconSource="res://tabIcons/cog" android:iconSource="res://settings">
        <Frame defaultPage="settings/settings-page"></Frame>
    </TabViewItem>
</TabView>

我最好在 iconSource 图像周围添加一些填充，并可能稍微格式化标题。在此处输入图像描述

标签： javascriptcssxmlsassnativescript

解决方案

您是否尝试像对待标签一样对待它？使用标签的属性，如 width="100" height="100" stretch="aspectFill" 等...

更多关于图像组件的信息在这里https://docs.nativescript.org/ui/ns-ui-widgets/image

编辑： 如果它不起作用，那么尝试实现自定义底部导航而不是 tabview，它更灵活，跨平台的 UI 更统一，就像这个https://play.nativescript.org/?template=play-tsc&id= R2y34S&v=11

推荐阅读