React Native - 現在の時間を取得し、動的なx（時間）軸を作成しますか？

Question

2週間前にReact Nativeで作業を始めました。壁に当たった。

私は

...温度、湿度、COレベルなどのようなものをログに記録されたIoTプロジェクトに取り組んでいる私は、リアルタイムチャート内のこれらのパラメータを表示するアプリを作成することを決めました。これまでは、サーバーと通信してオンデマンドでデータを取得する方法とグラフを描画する方法を理解しました。唯一の問題は、どのようにx軸（時間軸）を動的にするのですか？私は、数秒ごとにグラフを更新したいと思います（5としましょう）。

私はこれまで何もしていないし、リアクションには新しく、これをどう扱うべきか分かりません。たとえランダムに生成された数であっても、誰かがReact Nativeでダイナミックなx軸を使用して簡単な例を表示できたら大変です。

そして、どうすれば現在の時間を取得できますか？私は時間：分のような形式でそれをしたい。

ありがとうございました！

Answer 1

サーバーからデータを取得する方法と、データをプロットするために使用するライブラリに応じて、これを実装する方法はたくさんあります。私は可能な限り答えのジェネリックとして与えようとします。

getXAxisValueFromServerという関数を用意して、サーバーから必要な値を非同期で要求し、コールバックで返すとします。アプリケーションが反応的で、サーバからRx.js observableのようなデータを受信すると、ロジックは同じになりますが、オブザーバブルのデータコールバックに入れます）

コンポーネントを動的にレンダリングするには、新しい値が到着するたびにコンポーネントを再レンダリングする必要があります。

反応成分がunder exactly two conditions: when its state changes, and when its props changeに再現される。

したがって、コンポーネントを動的に更新するには、データをstateまたはpropsに結びつける必要があります。

一般に、Reactを使用する場合、it's a good idea to keep presentation separated from logic。したがって、サーバーへのデータを受け取り、そのデータをstateに保持する「スマートな」コンテナコンポーネントと、受け取ったデータをレンダリングする「ダム」プレゼンテーションコンポーネントを作成するのが最適なアプローチです。 dataという小道具を受け取るChartコンポーネントとして実装されたデータを正確にプロットするグラフがあるとします。我々は今、定期的にデータをサーバーに照会しChartを更新しますChartContainerを実装する：

import React, { Component } from 'react'; 
import { getXAxisValueFromServer } from './server-api'; 
import Chart from './chart'; 

export default class ChartContainer extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { data: null }; 
    this.intervalHandle = null; 
    } 

    componentDidMount() { 
    this.intervalHandle = setInterval(() => 
     getXAxisValueFromServer((data) => this.setState({ data })), 
    3000); //this is just an example - here we try to update 
      //the data every 3 seconds 
    } 

    render() { 
    return (
     <Chart data={this.state.data} /> 
    ); 
    } 
} 

だからここに、私たちは、3秒ごとに新しいデータをサーバーに照会し、更新する例コンテナを作成しましたサーバーがそれを返すときに受信したデータをグラフ化します。これをユースケースに適応させることができます。