反應本機時鐘 - 設置一個很長一段時間的計時器

我想創建一個應用程序與需要在屏幕上顯示一個時鐘的React本機（只有幾分鐘需要更新正確，而不是秒）。該應用程序可能在屏幕上（可見）多分鐘。反應本機時鐘 - 設置一個很長一段時間的計時器

有沒有一種正確的方法來做到這一點，就像我嘗試過的每種方式都提出了「設置長時間的定時器，即多分鐘，是Android上的性能和正確性問題......」。

我怎樣才能做到與正確性和影響最小一個簡單的時鐘電池等

時鐘工作正常，我只是得到了警告。我已經嘗試了各種方法，包括定期setTimeout/Interval和this.setTimeout，也反應本地背景計時器。

我也只需要更新時鐘，當這個屏幕回到視圖中，所以我取消了componentDidUnmount上的定時器。時鐘只需要在幾分鐘內更新，而不是幾秒鐘，並且不需要100％準確，即在分鐘更新完好之前有小的延遲。

謝謝！

代碼：

import React, {Component} from 'react'; 
import {View, Image, AppState} from 'react-native'; 
import {Text} from 'react-native'; 
import Styles from '../../styles/Styles'; 
import BackgroundTimer from 'react-native-background-timer'; 

/* 
Digital Clock 
*/ 

export default class UIDigitalClock extends Component { 

    // Render ----------------- 

    render() { 

     var label = this.formatAMPM(this.state.time); 

     return (
      <Text style={[Styles.h0,{fontSize:80,opacity:0.7}]}>{label}</Text> 
     ); 
    } 

    formatAMPM(date) { 
     var hours = date.getHours(); 
     var minutes = date.getMinutes(); 
     var ampm = hours >= 12 ? 'pm' : 'am'; 
     hours = hours % 12; 
     hours = hours ? hours : 12; // the hour '0' should be '12' 
     minutes = minutes < 10 ? '0'+minutes : minutes; 
     var strTime = hours + ':' + minutes; 
     return strTime; 
    } 

    //-------------------------------- 


    constructor(props) { 
     super(props); 
     this.state = { 
      time: new Date() 
     } 

    } 

    timer = null; 

    componentWillMount() { 
     AppState.addEventListener('change', this.handleAppStateChange); 
     console.log('Digital Clock - Mount - Start'); 
     this.startTimer(); 
    } 

    componentWillUnmount() { 
     AppState.removeEventListener('change', this.handleAppStateChange); 
     this.stopTimer(); 
    } 

    startTimer() { 
     return; 
     if (this.timer>0) return; // Already started 
     this.timer = BackgroundTimer.setInterval(() => { 
      // this will be executed every 200 ms 
      // even when app is the the background 
      this.updateTime(); 
     }, 1000); 
    } 
    stopTimer() { 
     console.log("Digital Clock - stop "); 
     if (this.timer>0) { 
      BackgroundTimer.clearInterval(this.timer); 
      this.timer = -1; 
     } 
    } 

    handleAppStateChange = (appState) => { 
     console.log("Digital Clock app state: "+appState); 
     if (appState=='background') { 
      console.log('Digital Clock - App in Background - Stop'); 
      this.stopTimer(); 
     } else if (appState=='active') { 
      console.log('Digital Clock - App is Active - Start'); 
      this.startTimer(); 
     } 

    } 

    updateTime() { 
     let time = this.state.time; 
     let newTime = new Date(); 
     // TODO - check if the app is in the foreground 
     console.log('Digital Clock - Tic '); 
     // Only update the render when the time changes... 
     if (!time || (time.getMinutes() != newTime.getMinutes() || time.getHours() != newTime.getHours())) { 
      console.log('Digital Clock - Time changed (mins/hours) - updating...'); 
      this.setState({time: newTime}); 
     } 
    } 


}

來源

2017-07-03 Dave Hurst

看看Later.js。你可以設定一個時間表每分鐘發火

const schedule = later.parse.text('every 1 mins'); 
later.date.localTime(); 

later.setTimeout(<your function>, schedule);

來源

2017-07-03 23:29:31

反應本機時鐘 - 設置一個很長一段時間的計時器

回答

相關問題