对于2种错误,我想显示2种不同的警报
在显示下一个警报之前,我想删除所有已存在的警报。
现在,一个警报出现在前一个警报之上,
在显示下一个之前,我如何解除警戒状态?
发布于 2020-11-08 18:30:14
要关闭react本机警报,只需执行此操作
Alert.alert(
'No Internet !',
'Your internet does not seems to work',
[
{ text: "Try again", onPress: () =>this.myfunction()},
{ text: "Dismiss", onPress: () =>console.log('dismissing alert')}
],
{ cancelable: false }
)
冰镇药丸!
发布于 2019-12-05 18:33:38
To handle this situation, the best solution is to design custom alert by using **react-native-dialog**. here is running sample code, it works fine for me and you can give your custom color and style in this alert
import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text,TouchableOpacity } from 'react-native';
// import PropTypes from 'prop-types';
// import Dialog from "react-native-dialog";
import Alertfunction from './src/CustomAlert'
export default class App extends Component{
render() {
return (
<Alertfunction Title={"Alert"} FontSize = {30} FontColor= '#FF9800' Visible={true}/>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
alignItems: 'center',
justifyContent: 'center',
}
});
CustomAlert.js
import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text,TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import Dialog from "react-native-dialog";
class Alertfunction extends Component {
state = {
dialogVisible: this.props.Visible
};
showDialog = () => {
this.setState({ dialogVisible: this.props.Visible });
};
handleCancel = () => {
this.setState({ dialogVisible: false });
// this.props.Visible=false;
};
handleDelete = () => {
this.setState({ dialogVisible: false });
//this.props.Visible=false;
};
render() {
return (
<View>
<TouchableOpacity onPress={this.showDialog}>
<Text >{this.props.Title}</Text>
</TouchableOpacity>
<Dialog.Container visible={this.state.dialogVisible}>
<Dialog.Title style={{fontSize : this.props.FontSize, color: this.props.FontColor}}>{this.props.Title}</Dialog.Title>
<Dialog.Description style={{fontSize : this.props.FontSize, color: this.props.FontColor}}>
Do you want to delete this account? You cannot undo this action.
</Dialog.Description>
<Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="Cancel" onPress={this.handleCancel} />
<Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="ok" onPress={this.handleDelete} />
</Dialog.Container>
</View>
);
}
}
export default Alertfunction;
Alertfunction.propTypes =
{
Title: PropTypes.string,
FontSize: PropTypes.number,
FontColor: PropTypes.string,
Visible: PropTypes.bool,
}
Alertfunction.defaultProps =
{
Title: "Default Name",
FontColor: "#00E676",
FontSize: 15,
Visible:false
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
alignItems: 'center',
justifyContent: 'center',
}
});
发布于 2018-12-07 18:21:09
您不能以编程方式关闭本机警报,您可以使用自定义警报框或具有“可见”属性的模态组件:https://facebook.github.io/react-native/docs/modal
https://stackoverflow.com/questions/53666840
复制相似问题