Reactjs 如何在react native中设置警报元素的样式？

我正在使用react native并创建了一个警报元素

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

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

---

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

我认为这是不可能的，因为react native的

警报

组件包含在Android和iOS中，无法修改：/

我推荐这种类似的问题

---

再见

您可以使用自定义库，如

您可以根据自己的喜好设置模态的样式：

        <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>

查看查看更多选项

---

奖励：如果您想为react native找到一个好的库，请尝试

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

**
*警报按钮样式
*/
导出类型AlertButtonStyle=$Enum；
警惕，警惕（“当心！”，
“点击重置将擦除手机上的所有应用数据。此操作无法撤消！”，
[
{text:'Reset'，onPress:this.\u doSomethingSerious，style:'destroctive'}，
{text:'取消'}，
],
{可取消：false}
)

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

查看代码，它实例化了一个

AlertDialog.Builder

，查看android原始版的

AlertDialog.Builder

，只有上下文的构造函数使用

resolveDialogTheme

和

themeResId=0

。无论如何，这种方法的重要部分是：

}其他{
最终类型值outValue=新类型值（）；
context.getTheme（）.resolveAttribute（R.attr.alertDialogTheme，outValue，true）；
返回outValue.resourceId；
}

回退样式/主题是

alertDialogTheme

，因此您可以使用

android:alertDialogTheme

覆盖警报对话框默认主题，如下所示：

@风格/主题
#152849

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

---

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

我如何定义这样的通用模式，以及如何使用everywhereModal并不警惕。我认为这只适用于iOS，正如样式中指定的那样：“破坏性”是我需要将取消按钮颜色更改为红色的原因。

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

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