首页 > 解决方案 > 有没有一种有效的方法来改变 NativeScript 中的侧边抽屉图标颜色?(特别是 iOS)

问题描述

我试图在 中应用样式ActionBar,更改其背景和颜色。这就是NativeScript文档所说的应该做的......但实际上,当我尝试为这个图标添加样式时,它并没有得到我的颜色。

此外,如果我向 中添加标题ActionBar,它会继承我的样式并使用我选择的颜色进行渲染。

但这并没有发生在行动项目上!

这是我的文件

<template>
    <ActionBar>
        <NavigationButton ios:visibility="collapsed" icon="res://menu" @tap="onDrawerButtonTap" />
        <ActionItem icon="res://menu" 
            android:visibility="collapsed" 
            @tap="onDrawerButtonTap"
            ios.position="left">
        </ActionItem>
        <Image class="logo" src="~/images/logo.png"></Image>  
    </ActionBar>
</template>

<script>
import * as utils from "~/helpers/utils";

export default {
    data(){
        return {

        };
    },

    methods: {
        onDrawerButtonTap() {
            utils.showDrawer();
        },
    }
}
</script>

<style lang="scss" scoped>

    @import '../../_app-variables.scss';

    ActionBar {
        background-color: #c3c3c3;
        color: $primary;
    }

</style>

有没有一种有效的方法来改变这个sideDrawer按钮的颜色?

标签: iosnativescriptnativescript-vue

解决方案


尝试在 ActionBar 上将 iosIconRenderingMode 设置为 alwaysTemplate应该会将图标颜色变为 CSS 中指定的颜色。

<ActionBar iosIconRenderingMode="alwaysTemplate">

推荐阅读