React Native - 獲取當前時間並創建動態x（時間）軸？

兩週前我剛剛開始與React Native合作，並且我撞上了牆。React Native - 獲取當前時間並創建動態x（時間）軸？

我的工作是記錄如溫度，溼度，二氧化碳水平等的物聯網項目..

我還決定建立一個應用程序來顯示實時圖表內部這些參數。到目前爲止，我想出瞭如何與服務器進行通信，按需獲取數據以及如何繪製圖表。唯一的問題是，我如何使x軸（時間軸）動態化？當我向服務器發出新的參數請求時，我想每隔幾秒更新一次圖表（比方說5）。

我從來沒有做過類似的事情，我是React新手，所以我不知道如何處理這個問題。如果有人能夠在動態X軸上顯示React Native的快速示例，即使它是隨機生成的數字，我也會很樂意。

噢，我該如何獲得當前時間？我希望它的格式如小時：分鐘。

謝謝！

來源

2017-05-06 Davezor

歡迎來到stackoverflow，你可以發佈你正在使用的圖形庫和/或你目前如何繪製它？我認爲這對每個人都更有幫助。 –

嘿，那裏，謝謝你的熱烈歡迎。我使用Victory-Native進行繪圖。 – Davezor

有很多方法可以實現這一點，這取決於您如何從服務器獲取數據以及使用什麼庫來繪製數據。我會盡可能給出一個答案的通用答案。

假設您有一個名爲getXAxisValueFromServer的函數，它將異步請求您的服務器所需的值，並在回調中將其返回。（假定你的應用程序定期地從服務器查詢數據，如果你的應用程序是被動的並且通過類似於Rx.js observable的東西從服務器接收數據，邏輯將是相同的，但是你會把它放在可觀測數據回調中）

爲了讓你的組件動態渲染，你需要在新值到達時重新渲染你的組件。

React組件重新呈現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中，以及一個呈現接收到的數據的「啞巴」呈現組件。我們假設我們有一張圖表，它正確繪製了數據實現的Chart組件，該組件接收到名爲data的道具。現在，我們想實現一個ChartContainer將定期查詢的數據服務器和更新Chart：

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秒更新圖表與服務器返回時收到的數據。你應該能夠適應你的用例。

來源

2017-05-06 16:24:58

我的上帝，這正是我所尋找的，我不知道如何開始。謝謝，我想我現在可以處理這個問題。順便說一下，我使用Victory-Native繪製圖表。 – Davezor

不客氣！如果我有幫助，請考慮[接受我的回答]（http://stackoverflow.com/help/accepted-answer）。 :) –

React Native - 獲取當前時間並創建動態x（時間）軸？

回答

相關問題