Estoy tratando de crear una aplicación de cronómetro. Estoy usando la función setInterval para aumentar el tiempo. Pero mi aplicación para quedarse detrás de la aplicación de reloj de Windows.

aplicación de reloj de Windows:

mi aplicación:

Lancé ambos al mismo tiempo.

Aplicación.js

 export default function App() { const [time, setTime] = useState({ running: false, time: 0 }); const [count, setCount] = useState(time.time); useEffect(() => { console.log(count); let id; if (time.running) id = setInterval(() => setCount(count => count + 100), 100); return () => { if (time.running) clearInterval(id); }; }, [time.running]); const counter = () => { if (time.running) { setTime({ running: false, time: time.time }); } else { setTime({ running: true, time: time.time }); } }; } return ( <TimeContext.Provider value={{ time, setTime }}> <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}> <View style={styles.stopwatch}> <Stopwatch time={count} /> </View> </SafeAreaView> </TimeContext.Provider> );

Cronómetro.js

 export default function Stopwatch({ time }) { return ( <Text style={[styles.text, { color: theme.text }]}>{msToTime(time)}</Text> ); }

ms-to-time.js

 export default function msToTime(duration) { var milliseconds = Math.floor((duration % 1000) / 100), seconds = Math.floor((duration / 1000) % 60), minutes = Math.floor((duration / (1000 * 60)) % 60), hours = Math.floor((duration / (1000 * 60 * 60)) % 24); hours = (hours < 10) ? "0" + hours : hours; minutes = (minutes < 10) ? "0" + minutes : minutes; seconds = (seconds < 10) ? "0" + seconds : seconds; return hours + ":" + minutes + ":" + seconds + "." + milliseconds; }

Al hacer clic en el botón de inicio, se activa la función de counter . Estoy aumentando la variable de count en lugar de time.time porque otros componentes usan time , así que bloqueo el renderizado de otros de esta manera.