Javascript 如何以编程方式删除警报提示?
单击一个按钮,我启动一个需要一些时间的过程,一旦完成,我就导航到一个指定的屏幕 在处理过程中,我会看到一个“加载”提示,根据提示:“默认情况下,唯一的按钮是‘确定’按钮”。一旦这个过程完成,我会再次提醒大家数据已经准备好了 问题是,我得到了两个彼此上方的提示,它们需要用户点击才能删除 我想在显示第二个提示之前删除第一个提示(并且可能为第二个提示设置计时器,然后也删除它)Javascript 如何以编程方式删除警报提示?,javascript,reactjs,react-native,react-native-android,react-native-ios,Javascript,Reactjs,React Native,React Native Android,React Native Ios,单击一个按钮,我启动一个需要一些时间的过程,一旦完成,我就导航到一个指定的屏幕 在处理过程中,我会看到一个“加载”提示,根据提示:“默认情况下,唯一的按钮是‘确定’按钮”。一旦这个过程完成,我会再次提醒大家数据已经准备好了 问题是,我得到了两个彼此上方的提示,它们需要用户点击才能删除 我想在显示第二个提示之前删除第一个提示(并且可能为第二个提示设置计时器,然后也删除它) 如何以编程方式删除警报提示?要实现您的要求,一个基本的解决方法是创建一个单独的组件来代替警报 我编写的组件接受两个道具文本和可
如何以编程方式删除
警报
提示?要实现您的要求,一个基本的解决方法是创建一个单独的组件来代替警报
我编写的组件接受两个道具<代码>文本和可见
在您的屏幕内,您可以将其添加为:
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} />
)
}
}
希望有帮助。您可以使用自定义模式来实现这一点,而不是使用警报。@digit我不想用提示消息覆盖整个屏幕,然后单击它使其消失。我想要一个类似于Android中的toast的东西。然后你可以使用ToasStandRoid->。@digit这在IOS上也可以用?目前没有办法,我必须用我自己的react-native-repo创建一个Disclose方法才能让它们消失。我只是在iOS上做的,因为这是我正在开发的平台,但我计划Spring到facebook/react native,希望他们能将其添加到下一个版本中。
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"
}
}