ネイティブクロックに反応する - 長時間タイマーを設定する

Question

React Nativeを使って画面に時計を表示する必要があるアプリを作成しようとしています。アプリは複数の時間画面（可視）に表示されることがあります。

私が試したあらゆる方法で、「タイマーを長時間、つまり数分で設定することは、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}); 
     } 
    } 


} 

Answer 1

がLater.jsを見てみましょう。毎分火をつけるスケジュールを設定できます

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

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