[英]Dismiss Alert in React Native
So I have an app that shows an alert when you go idle for a few seconds, and there is 'YES' button in the alert when you pressed it it will refresh the timer and shows the alert again, and if i do nothing with the alert it goes to next page somehow the Alert still open in the next page and I want it to be closed. 所以我有一个应用程序,当您闲置几秒钟时会显示警报,当您按下警报时,警报中有一个“是”按钮,它将刷新计时器并再次显示警报,如果我对警报转到下一页警报仍在下一页中打开,我希望将其关闭。 Is there anyway to close it?
反正有关闭吗? Thanks in advance
提前致谢
here is my code 这是我的代码
componentDidMount(){ this.timer = setTimeout(this.sessionTimeout, 3000); //auto reset after 60 seconds of inactivity } componentWillUnmount(){ clearTimeout(this.timer); } sessionTimeout(){ this.timer = setTimeout(this.onSubmit, 3000) Alert.alert('You ran out of time', 'still editing?', [ {text: 'YES', onPress:this.resetTimer.bind(this)} ], {cancelable: false} ) } resetTimer(){ clearTimeout(this.timer); this.timer = setTimeout(this.sessionTimeout, 3000); } onSubmit() { clearTimeout(this.timer); this.setState({ submitted: true }); //shows activity indicator const data = this.state; const result = validate(data, this.props.validationLang); if (!result.success) { this.setState({ error: result.error }); this.setState({ submitted: false }); //terminate activity indicator } else this.props.onSubmit(this.extractData(data), () => this.setState({ submitted: false })); }
You can use react-native-modalbox like this: 您可以像这样使用react-native-modalbox :
modal = null;
render(){
return (
<Modal
ref={(ref) => { this.modal = ref }}
coverScreen={true}
position={"center"}
onClosed={() => { console.log('modal closed') }}
swipeToClose={true}
backdropPressToClose={true} >
<View>
<Text>Message</Text>
<TouchableOpacity
onPress={() => { this.modal.close() }}
>
<Text>close</Text>
</TouchableOpacity>
</View>
</Modal>
)
}
Now you can show modal with this.modal.open()
and close it with this.modal.open()
and track closing modal with props of your Modal component. 现在,您可以使用
this.modal.open()
显示模态,并使用this.modal.open()
关闭模态,并使用Modal组件的props跟踪闭合模态。 For more information please read the Documentation . 有关更多信息,请阅读文档 。
I hope this can helo you. 我希望这可以使你高兴。
无法关闭“警报”,因此您可以通过在警报内部设置“否”按钮来更改导航方案,并仅在不按任何按钮后不按任何操作即可导航到另一个屏幕,它应该停留在该屏幕上,您可以设置按钮名称对于任何事情,而不是对用户有意义的“否”,那么如果我不想通过按“是”来刷新计时器,则可以导航到其他屏幕。
You reset when the alert appears, you press OK
, you press No
, you want the screen to move. 在出现警报时重置,请按
OK
,按No
,希望屏幕移动。
Alert.alert('You ran out of time', 'still editing?',
[
{text: 'YES', onPress: () => this.resetTimer()},
{
text: "Cancel",
onPress: () => this.props.navigation.navigate("nextScreen"),
style: "cancel"
}
],
{cancelable: false}
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.