如何计算用户在特定屏幕上花费在 React Native 上的时间

本文介绍了如何计算用户在特定屏幕上花费在 React Native 上的时间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试计算用户打开特定屏幕的时间，当他进入屏幕时时间开始，当我退出屏幕时时间停止并给出在屏幕上花费的时间

这是我的代码:

componentDidMount = () =>{让日期=新日期()；让小时 = date.getHours();让分钟 = date.getMinutes();让秒 = date.getSeconds();this.setState({开始时间:小时，开始分钟:分钟，开始秒:秒，});}

这里是 ComponentWillunmount

componentWillUnmount() {让日期=新日期()；让 endHours = date.getHours();让 endMinutes = date.getMinutes();让 endSeconds = date.getSeconds();console.log(`${endHours}:${endMinutes}:${endSeconds}`);控制台.日志(`${this.state.startHour}:${this.state.startMin}:${this.state.startSeconds}`，);

}

解决方案

看这段代码，这是一个功能组件.

import React, { useState, useEffect } from 'react';export const Chronometer = () =>{const [时间，设置时间] = useState({秒:0，分钟:0，小时: 0,});useEffect(() => {让 isCancelled = false;const AdvanceTime = () =>{setTimeout(() => {让 nSeconds = time.seconds;让 nMinutes = time.minutes;让 nHours = time.hours;n秒++；如果 (nSeconds > 59) {n分钟++；n秒 = 0;}如果(n分钟> 59){n小时++；n分钟 = 0;}如果 (nHours > 24) {n小时 = 0;}!isCancelled &&setTime({ 秒: nSeconds, 分钟: nMinutes, hours: nHours });}, 1000);};提前时间()；返回 () =>{//最后一次:控制台日志(时间)；isCancelled = true;};}， [时间]);返回 (<div><p>{`${time.hours <10 ?'0' + time.hours : time.hours} :${time.minutes <10 ?'0' + time.minutes : time.minutes} :${time.seconds <10 ?'0' + time.seconds : time.seconds}`}</p>

);};

看结果:

为了显示 useEffect 钩子中的总时间，你可以返回一个函数，在这个例子中我使用了一个 console.log，但是如果你想将它传递给其他组件，你可以提升状态或将它传递到网址参数

I'm trying to calculate time when user open a specific screen,When he enters in the screen the the time starts and when I exit from the screen the time stops and gives the time spend on the screen

here is my code:

componentDidMount = () => { let date = new Date(); let hours = date.getHours(); let minutes = date.getMinutes(); let seconds = date.getSeconds(); this.setState({ startHour: hours, startMin: minutes, startSeconds: seconds, }); }

Here is ComponentWillunmount

componentWillUnmount() { let date = new Date(); let endHours = date.getHours(); let endMinutes = date.getMinutes(); let endSeconds = date.getSeconds(); console.log(`${endHours}:${endMinutes}:${endSeconds}`); console.log( `${this.state.startHour}:${this.state.startMin}:${this.state.startSeconds}`, );

}

解决方案

Look this code, this is a functional component.

import React, { useState, useEffect } from 'react'; export const Chronometer = () => { const [time, setTime] = useState({ seconds: 0, minutes: 0, hours: 0, }); useEffect(() => { let isCancelled = false; const advanceTime = () => { setTimeout(() => { let nSeconds = time.seconds; let nMinutes = time.minutes; let nHours = time.hours; nSeconds++; if (nSeconds > 59) { nMinutes++; nSeconds = 0; } if (nMinutes > 59) { nHours++; nMinutes = 0; } if (nHours > 24) { nHours = 0; } !isCancelled && setTime({ seconds: nSeconds, minutes: nMinutes, hours: nHours }); }, 1000); }; advanceTime(); return () => { //final time: console.log(time); isCancelled = true; }; }, [time]); return ( <div> <p> {` ${time.hours < 10 ? '0' + time.hours : time.hours} : ${time.minutes < 10 ? '0' + time.minutes : time.minutes} : ${time.seconds < 10 ? '0' + time.seconds : time.seconds} `} </p> </div> ); };

Look the result:

To show the total of the time in the useEffect hook you can return a function, in this example I use a console.log, but if you want to pass it to other components you can elevate the state or pass it in the URL parameters