浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】moment.jsを使って現在の時刻をリアルタイムに表示する

タイトル通り、React Native で現在の時刻を秒単位までリアルタイムに表示する方法についてです。
なお、今回は React Native での書き方ですが、こちらは React.js にもそのまま転用できます。

 

サンプルコード…というか、コード全文がこちら!

import React from 'react';
import { SafeAreaView, Text } from 'react-native';
import moment from 'moment';

class SamplePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: moment(),
    }
  }
  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ time: moment() });
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <SafeAreaView>
        <Text>{moment().format('YYYY/M/D')}</Text>
        <Text>{this.state.time.format('HH:mm:ss')}</Text>
      </SafeAreaView>
    );
  }
}
export default SamplePage;

ポイントは、componentDidMount() で 1000ミリ秒 = 1秒ごとに state の time に現在時間を追加している点です。
このようにすることで、1秒ごとに画面の再描画が行われ、現在の時間が○秒単位で表示することができます。

なお、setInterval() を使用した際は、ページを遷移するなどでもう定期的に処理を行わない場合、必ず clearInterval() を実行してタイマーを停止させる必要があります。
上記のコードでは componentWillUnmount() 内でその処理を行っています。

あとは、render() 内で、任意のフォーマットで日付データを表示させれば完了です!

 

以上、React Native で現在の時刻をリアルタイムに表示する方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)