Question

如果用户在10秒后没有触摸iPad屏幕，我会有一个显示视频的项目。我有两个屏幕 HomeScreen 和 VideoScreen ，默认显示 HomeScreen ，用户使用10秒后会显示 VideoScreen 不要触摸屏幕。这是我到目前为止所尝试过的，但是它没有工作

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

我希望在10秒过后将 displayVideo 更新为 true ，但如果用户触摸屏幕将重置并重新启动它。

非常感谢你的帮助。

Answer 1

这是一个没有React Native的工作示例：

＆＃13;

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"))

＆＃13;

<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>

＆＃13;

我做了什么：

您的计时器变量超出了您尝试使用它的范围。你应该把它保存在州。

您没有将displayVideo设置为false，因此它始终是真的。我重复使用您的updateState函数将状态设置为true或false

您的this函数中未定义

resetInterval。您可以像我一样使用this具有词法范围的箭头函数，或者使用resetInterval.bind(this)让this引用那里的调用类。

希望这有帮助。

如何在React Native中将计时器重置为0？

1 个答案: