我正在使用react-native,我创建了一个Alert元素。
Alert.alert(
'Warning',
'bla bla bla',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
]
)
现在我想对它应用一些风格。假设我想为它应用红色背景颜色和白色。
我怎样才能做到这一点?有可能吗?
答案 0 :(得分:6)
实际上,有一种方法可以自定义按钮上的文本,但是您仅限于提供的内容...下面是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}
)
答案 1 :(得分:4)
您可以使用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以查看更多选项。
奖金:如果您想为本地反应找到一个好的库,请尝试js.coach
答案 2 :(得分:2)
答案 3 :(得分:1)
我一直在android / rn源中寻找它。
查看the implementation代码,实例化一个AlertDialog.Builder
,然后查看android原始source code中的AlertDialog.Builder
,仅上下文的构造函数使用{{1 }}和resolveDialogTheme
。无论如何,关于此方法的重要部分是:
themeResId=0
后备样式/主题为} else {
final TypedValue outValue = new TypedValue();
context.getTheme().resolveAttribute(R.attr.alertDialogTheme, outValue, true);
return outValue.resourceId;
}
,因此您可以使用alertDialogTheme
覆盖警报对话框的默认主题,如下所示:
android:alertDialogTheme
我需要更改默认按钮的文本,所以这对我有用(至少在RN 0.61.5上有效),但是我不确定可以更改哪些道具。
当然,这不能解决运行时更改颜色的问题……如果真的需要,您可能应该使用lib或自己编写一个本机模块。