如何以编程方式删除警报提示? [英] How can I remove Alert prompts programmatically?

问题描述

单击按钮后，我会启动一个需要一些时间的过程，完成后我会导航到指定的屏幕.

On a button click, I start a process that takes sometime and once it gets finished I navigate to a specified screen.

在处理过程中，我Alert 根据 的加载"提示docs:默认情况下，唯一的按钮是确定"按钮".一旦该过程完成，我会再次提醒数据已准备就绪.

While under process, I Alert a "loading" prompt which according to the docs: "By default, the only button will be an 'OK' button". And once the process is done, I alert again that the data is ready.

问题是我得到了两个相互重叠的提示，并且它们需要用户的点击才能被删除.

Problem is that I get two prompts above each other, and that they need user's click to be removed.

我想在显示第二个提示之前删除第一个提示(并且可能为第二个设置一个计时器，然后也将其删除).

I would like to remove the first prompt before displaying the second (and maybe set a timer for the second to then remove it as well).

如何以编程方式删除 Alert 提示?

How can I remove Alert prompts programmatically?

推荐答案

为了实现您的要求，一个基本的解决方法是创建一个单独的组件来代替警报.

A basic workaround in order to achieve what you're asking for would be to create a separate component that will act as the alert instead.

我编写的组件接受两个 props.text 和 visible.

The component that I've written accepts two props. text and visible.

在您的屏幕中，您可以这样添加:

Inside your screen you can add it as so:

import React from 'react'
[....]

export default class Screen extends React.Component {
  state = {
    visible: true,
    text: "Loading... Please wait"
  }

  drawAlert() {
    setTimeout(() => {
      this.setState({text: "Will dismiss in 1 second"}, () => {
        setTimeout(() => {
          this.setState({visible: false})
        }, 1000);
      })
    }, 4000); // fake API request
    return (
      <Alert text={this.state.text} visible={this.state.visible} />
    )
  }

  render() {
    return(
      <Alert text={this.state.text} visible={this.state.visible} />
    )
  }
}

这是alert组件

import React, { Component } from 'react'
import { View, TouchableOpacity, Text } from 'react-native'

export default class Alert extends Component {
  state = {
    text: this.props.text,
    visible: this.props.visible
  }

  componentWillReceiveProps(nextProps) {
    this.setState({text: nextProps.text, visible: nextProps.visible})
  }

  drawBox() {
    if (this.state.visible) {
      return(
        <View style={styles.container}>
          <View style={styles.boxContainer}>
            <View style={styles.textContainer}>
              <Text style={styles.text}>{this.state.text}</Text>
            </View>
            <TouchableOpacity onPress={this.props.onPress} style={styles.buttonContainer}>
              <Text style={styles.buttonText}>OK</Text>
            </TouchableOpacity>
          </View>
        </View>
      )
    }
  }

  render() {
    return(
      <View style={styles.container}>
        {this.drawBox()}
      </View>
    )
  }
}

const styles = {
  wrapper: {
    flex: 1,
  },
  container: {
    zIndex: 99999,
    position: "absolute",
    backgroundColor: "rgba(0, 0, 0, 0.1)",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  },
  boxContainer: {
      backgroundColor: "#FFF",
      borderRadius: 2,
      padding: 10,
      width: 300,
      borderColor: "rgba(0,0,0,.1)",
      borderBottomWidth: 0,
      shadowOffset: { width: 0, height: 2 },
      elevation: 1,
      padding: 20
  },
  textContainer: {
    marginBottom: 20
  },
  text: {
    color: "#424242",
    fontFamily: "Roboto",
    fontSize: 18
  },
  buttonContainer: {
    alignItems: 'flex-start'
  },
  buttonText: {
    color: "#009688"
  }
}

希望有帮助.

这篇关于如何以编程方式删除警报提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！