如何在反应本机中设置警报元素的样式

Question

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

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

现在我想对它应用一些风格。假设我想为文本应用红色背景色和白色。

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

Answer 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}
    )

Answer 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();
  }

查看示例以查看更多选项。

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

Answer 3

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

我在这里推荐这种类似的问题！

再见！

Answer 4

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

看实现代码，它实例化了一个AlertDialog.Builder，再看AlertDialog.Builder的android原始源代码，只有上下文的构造函数使用带有themeResId=0的resolveDialogTheme。无论如何，这种方法的重要部分是：

} 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 或自己编写本机模块。