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

Question

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

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

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

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

原文由 splunk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用自定义库，例如 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

原文由 Abdellah Alaoui 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

实际上有一种方法可以自定义按钮上的文本，但您只能使用所提供的内容……下面是来自本机反应的类型定义。然后是一个显示红色按钮的简单示例。基本上“默认”是蓝色，“取消”是粗体但仍然是蓝色，“破坏性”是红色。

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

原文由 Sean O‘Leary 发布，翻译遵循 CC BY-SA 4.0 许可协议