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（时间）轴？

回答

相关问题