Question

我正在开发一个反应原生的测验应用程序。我将从后端获取5个问题并逐一向用户显示。用户可以跳过当前问题或者可以回答当前问题以转到下一个问题。

顶部有一个计时器，将从300秒开始倒计时。

现在我面临的问题是，每当用户跳过/尝试问题时（请访问下一个问题），计时器会自行重置并从300秒开始倒计时。

我想在访问下一个问题后保持计时器运行。有人可以帮我解决这个问题吗？

如果有人需要我可以给出示例代码我/我如何实现这个。

以下是示例代码：

export default class QuestionLayout extends Component {
constructor(props) {
    super(props);
    this.state = {
        currentQuestion: 0,
        questionsData: {}
    };
}

handleSkipQuestion() {
    this.props.next_question();
}


render() {
    const data = this.props.questions;

        return (
            <View>
               <Col>
                 <CountdownCircle seconds={60} radius={25} />
               </Col>           
               <Button rounded onPress={this.handleSkipQuestion}    //for going to next question
                />
                <View >
                   <Card>
                     <CardItem>
                        <MyWebView
                            style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center',
                                 marginRight: 20
                                }}
                                source={{
                                    html: this.wrapMathjax(questionData) //for displaying questoins
                                }}
                            />
                        </CardItem>
                    </Card>
                </View>
        );
    }
}

Answer 1

您应该在构造函数或componentDidMount中启动计时器。因此，如果页面重新呈现您的计时器不会重置

Answer 2

做这样的事情。

<QuizComponent>
   <Timer />
   <QuestionWithOptions />
   <ActionButtons />
</QuizComponent

1。QuizComponent将是获取数据的顶级组件测验。它将保持整个测验的状态。

2. Timer将从QuizComponent获取计时器详细信息，其任务是运行计时器，并在时间结束时通知父母。

3. QestionWithOptions将从父级获取问题数据并进行渲染以某种方式你想要它。用户可以从选项中选择正确的anwser并将更改通知父级，以便父级跟踪已更改的内容以及值，

4. ActionButtons将有一些按钮可以更改问题或通过通知家长来提交测验。

所有数据和状态都将由QuizComponent维护，当用户点击下一个问题时，QuestionWithOptions的数据只会更改。因此您的测验状态将被保留。你的计时器很开心

计时器保持在react-native中重置

2 个答案: