logo标签列表

以编程方式在React Native中关闭提示框

react-nativealert
7

针对两种错误，我想展示两个不同的警报。

在显示下一个警报之前，我想要移除已经存在的任何警报。

当前，一个警报会出现在上一个警报的上方，

如何在显示下一个警报之前解除一个警报？

7个回答
2
2

要关闭React Native警告框，只需这样做：

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

冷静一下！
2
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',

  }

});
0
你可以保留一个布尔值检查 "isAlertVisible" 来处理这种情况。每当触发警报时，将 "isAlertVisible" 标记为 true，并在打开每个警报之前添加一个检查，检查 "isAlertVisible" 是否为 true。
0

您可以使用传递给Alert.alert(title, message, buttons, {cancelable: true}的cancelable选项。

此外，您还可以传递一个onDismiss函数，以便您知道用户没有选择任何内容！

希望这有所帮助！

0

{ cancelable: false } 这个选项只在安卓系统中有效，iOS系统中无效。

你需要使用自定义的警告框来实现这个功能。

-4

实际上你可以！

例如：

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

在这种情况下，点击“再试一次”将关闭“警报”。
我希望在不需要按下任何警告按钮的情况下，它可以自动发生。 - Aishwarya
这很明显，因为这就是警报的工作方式。尽管有人反对，但这仍然是一个好的解决方案。 :) - Richard Zilahi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接