blocks|key|3997743|text|您不能以编程方式关闭本机警报，您可以使用自定义警报框或具有“可见”属性的模态组件：https://facebook.github.io/react-native/docs/modal|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3997744|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react-native/docs/modal^0|15|1E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can't dismiss the native Alert programmatically, you can use custom alert box or a Modal component which have a "visible" props : <a href="https://facebook.github.io/react-native/docs/modal" rel="nofollow noreferrer">https://facebook.github.io/react-native/docs/modal</a>

blocks|key|3994864|text|你可以保留一个布尔校验"isAlertVisible“来处理这种情况。每当触发警报时，将"isAlertVisible“标记为true，并在打开每个警报之前检查"isAlertVisible”是否为true。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3994865|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can keep a boolean check "isAlertVisible" to deal with this situation.
Mark "isAlertVisible" true whenever an Alert is triggered and add a check to every Alert before opening it, that whether "isAlertVisible" is true or not.

blocks|key|3997857|text|实际上你可以的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3997858|例如：|3997859|Alert.alert(
++'Oops!',
++'The+provided+passwords+did+not+match',
++[
++++{+text:+"Try+again",+onPress:+()+=>+null}
++],+
++{+cancelable:+false+}
)|code-block|syntax|javascript|3997860|在这种情况下，按Try+again将关闭Alert。|offset|length|style|CODE|3997861|entityMap^0|0|0|0|8|9|K|5|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

Actually you can! 

For example: 

<pre><code>Alert.alert(
 'Oops!',
 'The provided passwords did not match',
 [
 { text: "Try again", onPress: () =&gt; null}
 ], 
 { cancelable: false }
)
</code></pre>

In this case, presseing <code>Try again</code> will close the <code>Alert</code>.

blocks|key|3994965|text|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',

++}

});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3994966|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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 (

 &lt;Alertfunction Title={"Alert"} FontSize = {30} FontColor= '#FF9800' Visible={true}/&gt;


 );
 }
 }


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 = () =&gt; {
 this.setState({ dialogVisible: this.props.Visible });
 };

 handleCancel = () =&gt; {
 this.setState({ dialogVisible: false });
 // this.props.Visible=false;
 };

 handleDelete = () =&gt; {
 this.setState({ dialogVisible: false });
 //this.props.Visible=false;
 };

 render() {

 return (

 &lt;View&gt;
 &lt;TouchableOpacity onPress={this.showDialog}&gt;
 &lt;Text &gt;{this.props.Title}&lt;/Text&gt;
 &lt;/TouchableOpacity&gt;
 &lt;Dialog.Container visible={this.state.dialogVisible}&gt;
 &lt;Dialog.Title style={{fontSize : this.props.FontSize, color: this.props.FontColor}}&gt;{this.props.Title}&lt;/Dialog.Title&gt;
 &lt;Dialog.Description style={{fontSize : this.props.FontSize, color: this.props.FontColor}}&gt;
 Do you want to delete this account? You cannot undo this action.
 &lt;/Dialog.Description&gt;
 &lt;Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="Cancel" onPress={this.handleCancel} /&gt;
 &lt;Dialog.Button style={{fontSize : this.props.FontSize, color: this.props.FontColor}} label="ok" onPress={this.handleDelete} /&gt;
 &lt;/Dialog.Container&gt;
 &lt;/View&gt;

 );
 }
 }

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

 }

});
</code></pre>

blocks|key|3997923|text|要关闭react本机警报，只需执行此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3997924|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+}
)|code-block|syntax|javascript|3997925|冰镇药丸！|3997926|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

To dismiss a react native alert simply do it
<pre><code>Alert.alert(
 'No Internet !',
 'Your internet does not seems to work',
 [
 { text: &quot;Try again&quot;, onPress: () =&gt;this.myfunction()},
 { text: &quot;Dismiss&quot;, onPress: () =&gt;console.log('dismissing alert')}
 ], 
 { cancelable: false }
)
</code></pre>
Chill Pill !

blocks|key|3997968|text|您可以使用传递给Alert.alert(title,+message,+buttons,+{cancelable:+true}的cancelable选项。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3997969|此外，您可以传递一个函数onDismiss，这样您就可以知道用户没有选择任何内容！|3997970|希望这能有所帮助！|3997971|entityMap^0|8|1J|1S|A|0|C|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

You can use the <code>cancelable</code> option that's passed to <code>Alert.alert(title, message, buttons, {cancelable: true}</code>.
Moreover, you can pass a function <code>onDismiss</code>, so that you know that the user didn't choose anything!
Hope this helped!

For 2 kind of errors I want to show 2 different alert

I want to remove any alert already present, before showing up the next alert.

Right now one alert comes above the previous alert,

How can I dismiss on alert before showing up the next one?

Dismiss Alert programmatically react native

对于2种错误，我想显示2种不同的警报在显示下一个警报之前，我想删除所有已存在的警报。现在，一个警报出现在前一个警报之上，在显示下一个之前，我如何解除警戒状态？

问以编程方式关闭Alert react native
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以编程方式关闭Alert react nativeEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以编程方式关闭Alert react native
EN