Question

我是反应原生的新手。我写了秒表，但问题是，当我去另一页然后又回来时，秒表停止工作。我希望秒表继续工作，直到用户按下停止按钮。我知道，我应该使用全局变量，但我不知道如何使用它。我的代码是：

export default class Record extends Component {
 constructor(props) {
  super(props);
  this.state = {
  stopwatchStart: false,
  stopWatchTime: '00:00:00'

};
toggleStopwatch() {

if (!this.state.stopwatchStart) {
  startDate = new Date();
  startTime = startDate.getTime();
  that = this;
  setInterval(function () {
    var date = new Date();
    time = (date.getTime() - startTime) / 1000;
    hour = parseInt(time / 3600);
    timeAgo = parseInt(time % 3600);
    min = parseInt(timeAgo / 60);
    second = parseInt(timeAgo % 60);
    that.setState({
      stopWatchTime: (hour + ':' + min + ':' + second)
    })
  }, 1000);  
}
this.setState({ stopwatchStart: !this.state.stopwatchStart });}

Answer 1

我认为你应该使用redux来处理这个...... https://redux.js.org/

Answer 2

我仍然不明白您的观点是什么意思，但可能您正在打开另一个应用程序或将应用程序带到后台。要在React Native应用程序中保留数据，您应该使用AsyncStorage。将来您可能希望使用Sqlite，Redux persist或其他类似的东西来保持数据的持久性。

您可以在应用转到后台之前设置此项。

try {
  await AsyncStorage.setItem('timeKey', myTimeVar.toString());
} catch (error) {
  // Error saving data
}

通过使用您的密钥，您可以获得最新的

值

try {
  const value = await AsyncStorage.getItem('timeKey');
  if (value !== null){
    // We have data!!
    console.log(value);
  }
} catch (error) {
  // Error retrieving data
}

您不必通过简单的提取（appClosedTime-currrentTime + timeWastedInFirstSession）在后台运行计时器就可以实现目标。

Answer 3

我正在尝试了解您需要什么，所以我有以下问题，您是否希望在更改屏幕后间隔继续运行？，因为组件不能以这种方式工作。您必须遵循组件的生命周期（https://reactjs.org/docs/react-component.html），因此，在更改“记录”组件的屏幕后，它将被卸载并且间隔将被破坏。如果您想在多个组件中使用它，您可以更多地描述您想要对区间做什么。

如何在react-native中使用和更新全局变量？

3 个答案: