Question

所以我有一个应用程序，当您闲置几秒钟时会显示警报，当您按下警报时，在警报中有“是”按钮，它将刷新计时器并再次显示警报，如果我警报什么都没有，它会转到下一页，警报仍会在下一页中打开，我希望将其关闭。反正有关闭吗？预先感谢

这是我的代码

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

Answer 1

您可以像这样使用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>
       )
   }

现在，您可以使用this.modal.open()显示模态，并使用this.modal.open()将其关闭，并使用Modal组件的props跟踪关闭模态。有关更多信息，请阅读Documentation。

我希望这能使你高兴。

Answer 2

无法关闭警报，因此您可以通过在警报内设置“否”按钮来更改导航方案，并仅在按无按钮后不按任何操作即可导航到另一个屏幕，它应该停留在该屏幕上将按钮名称设置为任何东西，而不是对用户有意义的“否”，然后如果我不想通过按“是”来刷新计时器，则可以导航到其他屏幕。

Answer 3

在出现警报时重置，请按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}
        )

在React Native中关闭警报

3 个答案: