Как сбросить таймер до 0 в React Native?

Question

У меня есть проект, который будет отображать видео, если пользователь не прикасается к экрану iPad через 10 секунд.У меня есть два экрана HomeScreen и VideoScreen , HomeScreen , которые будут отображаться по умолчанию, и VideoScreen будет отображаться через 10 секунд после того, как пользователь не прикасаетсяэкран.Вот что я пробовал до сих пор, но он не работает

constructor(props) {
    super(props);

    this.state = {
        displayVideo: false
    };
}
componentDidMount() {
    var timer = setInterval( () => {
        this.updateState();
    }, 10000);
  }


resetInterval() {
    clearInterval(this.timer);
    this.timer = setInterval( () => {
        this.updateState();
    }, 10000);
}

updateState = () => {
    this.setState({displayVideo:true});
}

Я хочу обновить displayVideo до true , когда прошло 10 секунд, ноесли пользователь прикоснется к экрану, произойдет его сброс и повторный запуск.

Большое спасибо за любую помощь.

Answer 1

Вот рабочий пример без React Native:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            displayVideo: false,
            timer: null
        };
    }

    componentDidMount() {
        const timer = setInterval( () => {
            console.log("componentDidMount - show video");
            this.updateState(true);
        }, 10000);
        
        this.setState({ timer: timer })
    }

    resetInterval = () => {
        console.log("resetInterval working...");
        
        clearInterval(this.state.timer);

        const timer = setInterval( () => {
            console.log("reset timer - show video")
            this.updateState(true);
        }, 10000);
        
        this.setState({
            timer: timer,
            displayVideo: false
        });
    }

    updateState = (value) => {
        this.setState({ displayVideo: value });
    }

    render() {
        return (
            <div onClick={this.resetInterval}>
                <div>Testing displayVideo: {this.state.displayVideo.toString()}</div>
            </div>)
    }
}

ReactDOM.render(<MyComponent />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Что я сделал:

Ваша переменная таймера вышла из области видимости, где вы пытались ее использовать.Вы должны сохранить это в состоянии.

Вы нигде не устанавливали displayVideo на false, поэтому это всегда должно было быть правдой.Я повторно использовал вашу функцию updateState, чтобы установить состояние true или false

this, которое не было определено в вашей функции resetInterval.Вы можете либо использовать функцию стрелки, где this имеет лексическую область видимости, как я, либо использовать resetInterval.bind(this), чтобы this ссылался на вызывающий класс там.

Надеюсь, это поможет.