react-native - 使用 xstream 和 react-native-svg-charts 将流中的数据绘制成图形

Question

我对 React native 还很陌生，所以如果我的解释很糟糕，请原谅。

我正在尝试制作一个应用程序，它获取 BLE 数据并将其绘制到图表上，因为它被接收。使用“xstream”包接收数据时将数据放入流中，然后使用“stream-to-array”包将这些数据放入数组中，我使用的图形库是“react-native -svg 图表'。

到目前为止，我一直在努力测试从流中获取数据并将其格式化在图表上的能力，因为即使流中有数据也没有显示任何内容。

import React from "react";
import { LineChart, Grid } from "react-native-svg-charts";
import xs from "xstream";

var toArray = require("stream-to-array");
const set = [10, 20, 30, 40];

var stream = xs.fromArray(set);
var data = [];

stream.addListener({
  next: (i) => console.log(i),
  error: (err) => console.error(err),
});

toArray(stream, function (err, data) {
  assert.ok(Array.isArray(data));
});

class Graph extends React.PureComponent {
  render() {
    return (
      <LineChart
        style={{ height: 200 }}
        data={data}
        animate="true"
        svg={{ stroke: "rgb(134, 65, 244)" }}
        contentInset={{ top: 20, bottom: 20 }}
      >
        <Grid />
      </LineChart>
    );
  }
}

export default Graph;