React Native：如何通过警报扩展此计时器？

Question

我是本机反应的新手。我有一个倒数计时器（当前设置为 5 秒），当时间到了时，我想要一个警报，让用户可以选择重新启动计时器。屏幕中会有其他元素，所以我不一定想要“刷新”（例如，如果用户输入了一些文本，我不希望它在计时器延长时消失）。

时间到了时会弹出警报，但我不确定如何通过警报按钮重置计时器。

import React, { Component } from 'react';

import {

  StyleSheet,

  TouchableOpacity,

  Text,

  View,

  TextInput,

  Alert,

} from 'react-native'

import CountDown from 'react-native-countdown-component';

export default class Payment extends Component {

  constructor(props) {

    super(props);

    this.state = {

      timer: 5,

    };

  }

  

  timesUp = () => {

    Alert.alert(

      "Time's Up!",

      "How can we help you?",

      [

        { 

          text: "Extend Timer",

          // I want to restart the timer here

          onPress: this.setState(newTime => ({ timer: 5})) },

        {

          text: "Cancel",

          onPress: () => console.log("Cancel Pressed") },

      ],

      { cancelable: false }

    );

  }

  render() {

    return (

      <View>

        <View style={{ marginTop: 20}}>

          <CountDown

            size={15}

            until={this.state.timer}

            onFinish={this.timesUp}

            digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#cccccc'}}

            digitTxtStyle={{color: 'black'}}

            separatorStyle={{color: 'black'}}

            timeToShow={['M', 'S']}

            timeLabels={{m: null, s: null}}

            showSeparator

          />

      </View>

    );

  }

}

Answer 1

请使用 setTimeout(function() {}, Time in Milli seconds)。它是一个原生的 javascript 函数，用于在一定时间后触发一个函数。