如何在 react-native 中设置 Alert 元素的样式？答案

【问题标题】：how do I style an Alert element in react-native?如何在 react-native 中设置 Alert 元素的样式？
【发布时间】：2017-05-30 16:08:28
【问题描述】：

我正在使用 react-native 并且我创建了一个 Alert 元素。

Alert.alert(
    'Warning',
    'bla bla bla',
    [
           {text: 'OK', onPress: () => console.log('OK Pressed')},
    ]
)

现在我想给它应用一些样式。假设我想为它应用红色背景颜色和白色文本。

我怎样才能做到这一点？有可能吗？

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

实际上有一种方法可以自定义按钮上的文本，但您仅限于提供的内容......下面是 react native 的类型定义。然后是一个显示红色按钮的简单示例。基本上“默认”是蓝色，“取消”是粗体但仍然是蓝色，“破坏性”是红色。

**
 * An Alert button style
*/
export type AlertButtonStyle = $Enum<{
/**
* Default button style
*/
'default': string,
/**
* Cancel button style
*/
'cancel': string,
/**
* Destructive button style
*/
'destructive': string,
}>;


Alert.alert("Look out!",
        "Hitting reset will wipe all the app's data on your phone. This cannot be undone!",
        [
        {text: 'Reset', onPress: this._doSomethingSerious, style: 'destructive'},
        {text: 'Cancel'},
        ],
        {cancelable: false}
    )

【讨论】：

我认为这仅适用于iOS，如RN docs中所述
style: '破坏性' 是我需要将取消按钮颜色更改为红色。

【解决方案2】：

您可以使用自定义库，例如 react-native-modalbox。

您可以随意设置模态框的样式：

        <Modal style={{background: 'red'}} ref={"modal1"}>
          <Text style={{color: 'white'}}>Basic modal</Text>
          <Button onPress={this.toggleSwipeToClose} style={styles.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button>
        </Modal>

您可以使用打开模式

openModal1(id) {
    this.refs.modal1.open();
  }

查看the example 以查看更多选项。

奖励：如果你想为 react-native 找到一个好的库，试试js.coach

【讨论】：

我如何定义这样的通用模态，并在任何地方使用
模态不提醒。

【解决方案3】：

我认为这是不可能的，因为 react-native 的 Alert 组件是包含在 Android 和 iOS 中的东西，无法修改：/

我推荐这种类似的问题here！

再见！

【讨论】：

【解决方案4】：

我一直在 android/rn 资源中寻找这个。

查看the implementation 代码，它实例化了一个AlertDialog.Builder，并查看了AlertDialog.Builder 的android 原始source code，只有上下文的构造函数使用resolveDialogTheme 和themeResId=0。无论如何，关于这个方法的重要部分是：

} else {
   final TypedValue outValue = new TypedValue();
   context.getTheme().resolveAttribute(R.attr.alertDialogTheme, outValue, true);
   return outValue.resourceId;
}

备用样式/主题是alertDialogTheme，因此您可以使用android:alertDialogTheme 覆盖警报对话框默认主题，如下所示：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:alertDialogTheme">@style/ThemeAlert</item>
    </style>

    <style name="ThemeAlert" parent="Theme.AppCompat.Light.Dialog.Alert">
        <!-- This one changes buttons text color -->
        <item name="colorAccent">#152849</item>
    </style>
</resources>

我需要更改默认按钮的文本，所以这对我有用（至少在 RN 0.61.5 上），但我不确定哪些道具可以更改。

当然，这并不能解决在运行时更改颜色的问题……如果确实需要，您可能应该使用 lib 或自己编写本机模块。

【讨论】：