Question

我使用标签导航模板创建了Nativescript Angular应用。该模板是根据app.component.html创建的：

<TabView androidTabsPosition="bottom" class="tab-view">

    <page-router-outlet
        *tabItem="{title: 'People', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Events', iconSource: getIconSource('search')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Tags', iconSource: getIconSource('browse')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

我在https://www.nativescriptthemebuilder.com/使用主题构建器创建了.css文件，该文件生成了以下部分：

.tab-view {
    selected-tab-text-color: #ffffff;
}

.tab-view {
    tab-text-color: #ffffff;
}

.tab-view {
    tab-background-color: #823551;
}

.tab-view {
    android-selected-tab-highlight-color: #d6c7d1;
}

有人指示将CSS类添加到本机元素，因此我添加了tab-view类，如您在第一段代码中所见。但是选项卡的文本颜色和所选选项卡的文本颜色不会更改，并且与主题构建器的颜色不匹配。我发现的所有示例都是针对xml视图的，或者不使用*tabItem指令。

因此，Nativescript的主题构建器无法与Nativescript自己的应用程序模板一起使用，或者我做错了什么。我是否忘记或错过了此配置中的某些功能？

如何使用nativescript angular和theme builder设置tabItem的样式？

0 个答案: