переключение между методами

Question

Этот интервал таймера, который я пытаюсь настроить в React native. У него есть начало, пауза и сброс в методе. Я установил, что пользователь может ввести минуты и секунды для таймера, а затем он запускает период отдыха (без пользовательского ввода в данный момент), а затем возвращается к повторному запуску таймера для входного значения.

Как я могу вызвать таймер, чтобы сделать паузу, пока timer.start () еще работает? Как мой связан с startClickTimer, который связан со всем остальным?

Ссылка на таймер интервала npm: https://www.npmjs.com/package/interval-timer

код:

класс экспорта по умолчанию IntervalTimer extends Component {

constructor(props) {
    super(props);
    this.state = {
        minutesInput: '',
        secondsInput:'',
        numberOfSets: '', //idk if this is even working...it use to be 4
        timer: null,
        currentSeconds: null,
        active: true,
    };

    this.startClickTimer = this.startClickTimer.bind(this);

}

componentWillUnmount() {
    const timer = this.state.timer;
    timer.stop()
}

startClickTimer() {

    console.log('<> <> in startClickTimer')
    const optionsActive = {
        startTime: parseInt(this.state.minutesInput) * 60 * 1000 + parseInt(this.state.secondsInput) * 1000, //how long the timer will be set to
        updateFrequency: 1000,
        selfAdjust: true,
        countdown: true,
    };
    const optionsRest = {
        startTime: 3000, //how long the timer will be set to
        updateFrequency: 1000,
        selfAdjust: true,
        countdown: true,
    };

    const timer = new Timer(optionsActive);
    this.setState({timer: timer});

    timer.on('update', () => {
        console.log(timer.getTime.seconds);
        this.setState({currentSeconds: timer.getTime.seconds});
    });

    timer.on('end', () => {
        const active = this.state.active;
        console.log('<> <> end timer, active', active);

        timer.reset(active ? optionsRest : optionsActive);

        this.setState({active: !active});
        timer.start();
        // this.setState({currentSeconds: timer.getTime.seconds});

    });

    timer.start();
    console.log('<> <> timer started')
}
// getMinutes(){
//     return this.timer.getTime.minutes;
// }

// navbar stati c navigationOptions = {title: ${Strings.ST204},};

navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
        routeName: route,
    });
    this.props.navigation.dispatch(navigateAction);
}

// конец панели навигации

render() {


    return (

        <View style={{flex:1, justifyContent:"space-between",margin:30}}>

            {this.state.timer && (
                <Text>{this.state.active ? 'Active Timer: ' : 'Rest Timer: '}{this.state.timer.getTime.minutes} : {this.state.timer.getTime.seconds}</Text>
            )}

            <View style={styles.SideBySide}>

            <TextInput
                placeholder='Min'
                keyboardType={'numeric'}
                style={{
                    alignSelf: 'center',
                    marginRight: 5,
                    Text: " + "
                }}

                value={this.state.minutesInput} //need to parse this into a string, right now its a number and react complains
                onChangeText={(text) => {
                    // console.log("<> <> text input onChange udpate")
                    this.setState({
                        minutesInput: text
                    })
                }
                }
            />
            {/*<Text>:</Text>*/}
            <TextInput
                placeholder='Sec'
                keyboardType={'numeric'}
                style={{
                    alignSelf: 'center',
                    // margin: 50
                }}

                value={this.state.secondsInput} //need to parse this into a string, right now its a number and react complains
                onChangeText={(text) => {
                    this.setState({
                        secondsInput: text
                    })
                }
                }
            />
            </View>