如何在 NativeScript 中为 iOS 更改突出显示状态的按钮文本颜色？答案

【问题标题】：How to change Button text color in highlighted state for iOS in NativeScript?如何在 NativeScript 中为 iOS 更改突出显示状态的按钮文本颜色？
【发布时间】：2020-12-31 07:33:41
【问题描述】：

我正在尝试使用 css 在 iOS 上将 Button 文本颜色更改为突出显示状态。

尽管我可以更改文本颜色，但似乎也应用了某种不透明度或其他样式，我不知道它是什么或如何覆盖它。

这是Button 在默认状态下的样子：

这是它在突出显示状态下的样子：

我的代码：

.facebookBtn {
  background-color: #3b5998;
  color: #fff;
  &:highlighted {
    color: #fff;
    background-color: darken(#3b5998, 5%);
  }
}

我可以看出颜色参数有效，因为如果我将其更改为 #000 它有效（它也不是黑色，而是某种透明的黑色）。

我尝试过申请opacity: 1;，但没有帮助。不过，它在 Android 上也能正常工作。

有什么建议吗？

【问题讨论】：

有同样的问题。你有没有找到解决方案？
@heyman 我最终使用了来自github.com/nativescript-community/ui-material-components的MDButton
谢谢，我找到了一个解决方案，我已将其作为答案发布。

标签： css ios nativescript nativescript-vue

【解决方案1】：

您可以创建一个扩展 Button 的新按钮类，它不会在 iOS 中获得默认的 highlighted/tapped 样式：

import { isIOS, Button } from '@nativescript/core';

export class PlainButton extends Button {
    createNativeView() {
        if (isIOS) {
            return UIButton.buttonWithType(0);
        }
        return super.createNativeView();
    }
}

要将其注册为 nativescript-vue 中的全局组件，您可以这样做：

Vue.registerElement("PlainButton", () => PlainButton);

【讨论】：