从警报按钮中删除背景颜色

时间:2021-03-07 06:44:58

标签: android react-native material-design

我正在使用 React Native 构建应用程序,但对 Android 知之甚少。大多数情况下这不是问题,但我想使用本机组件进行警报。 React native 提供了一种启动本机警报的方法,但无法从 React 代码中对其进行样式设置。所以我求助于网上关于使用 /res/values/styles.xml 配置的建议。

这可能只是我缺乏 Android 方面的知识,但我似乎无法获得有关 XML 样式属性、它们的去向、它们的结构方式等的可靠参考。

我目前的问题是我的按钮显示背景颜色,这是我不想要的。我想要标准的材料设计文本按钮,就像你在 Android 上所期望的那样。在下图中,“OK”应该显示为绿色文本,没有背景。

enter image description here

这是我的styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#ffffff</item>
        <item name="android:statusBarColor">#16192E</item>
        <item name="colorPrimaryDark">#6fca3a</item>
        <item name="colorPrimary">#6fca3a</item>
        <item name="colorOnSurface">#ffffff</item>
        <item name="android:colorBackground">#16192E</item>
        <item name="android:colorBackgroundFloating">#16192E</item>
        <item name="alertDialogTheme">@style/AlertDialogTheme</item>
    </style>

    <style name="AlertDialogTheme" parent="ThemeOverlay.MaterialComponents.Dialog.Alert">
        <item name="buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
        <item name="buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
        <item name="buttonBarNeutralButtonStyle">@style/NeutralButtonStyle</item>
    </style>

    <style name="NeutralButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">#f00</item>
    </style>

    <style name="NegativeButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">#f00</item>
    </style>

    <style name="PositiveButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">#00f</item>
    </style>

</resources>

如果有人能指出我自己解决这些问题的方向,那也太棒了。

编辑

这不是关于如何更改我在代码中呈现到页面上的按钮样式的问题。这个问题特别是关于如何在内置 android 警报对话框上设置按钮的样式。似乎没有办法通过 JavaScript/React 来做到这一点,而且我能够为警报的背景、文本颜色和按钮颜色设置样式这一事实让我相信它可以通过 {{ 1}} 文件,而无需实际编写 Android 代码来扩展警报对话框。

1 个答案:

答案 0 :(得分:0)

在使用 Material Components 主题的原生 Android 中,您可以使用以下方法全局自定义警报对话框:

 <!-- Base application theme. -->
 <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    ...
    <item name="materialAlertDialogTheme">@style/AlertDialogTheme</item>
 </style>

与:

  <!-- Alert Dialog -->
  <style name="AlertDialogTheme" parent="@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
     <item name="buttonBarPositiveButtonStyle">@style/PositiveButtonStyle</item>
     <item name="buttonBarNegativeButtonStyle">@style/NegativeButtonStyle</item>
     <item name="buttonBarNeutralButtonStyle">....</item>
  </style>