【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 で現在の時刻をリアルタイムに表示する方法でした。
ご参考になれば幸いです。