动态更新实时折线图（react-native-chartjs）

Question

我正在尝试让图表随着新数据的出现而动态更新。我已经更新了当我console.log新值时看到的值，但是该图不会动态更新数据中的更改。 Linechart组件仅调用returnLabels和returnData一次，并且从此以后显示保持不变。

React函数chart.update（）的等效功能是什么，以便react-native能够更新图？

使用库：https://github.com/KittyCookie/react-native-chartjs

我尝试过重新绘制，在linechart组件中作为道具刷新。但是，这不能解决问题。

import {Chart,LineChart,BarChart,PieChart,ProgressChart,ContributionGraph} from 'react-native-chart-kit'
import React, { Component } from 'react';
import { View, Text, StyleSheet, ImageBackground, Icon, FlatList, Button, TextInput, Dimensions } from 'react-native';
import CheckBox from 'react-native-check-box'

export default class FocusScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: false,
    }
    this.dates =['January', 'February', 'March', 'April', 'May', 'June']
    this.values = [20, 30,40,50,60,70]
    this.shouldRedraw = true
    this.chart = new LineChart();
  }

  componentDidMount(){
    this.timer = setInterval(()=> this.returnLabels(), 1000)
    this.timer = setInterval(()=> this.returnData(), 1000)
  }

  updateShouldRedraw = () => {
    this.shouldRedraw = true;
  }

  returnLabels = () => {
    this.dates.push(parseInt(Math.random()*100).toString())
    console.log(this.dates)
    return this.dates
  } 

  returnData = () => {
    this.values.push(parseInt(Math.random()*100))
    console.log(this.values)
    return this.values  
  }

  render() {
    return (
      <View style={styles.container}>
        <View>
          <Text>
            Bezier Line Chart
          </Text>
          <LineChart

            data={{
              labels: this.returnLabels(),
              datasets: [{
                data: this.returnData()
              }]
            }}
            redraw
            width={Dimensions.get('window').width /2} // from react-native
            height={400}
            yAxisLabel={'$'}
            chartConfig={{
              backgroundColor: '#e26a00',
              backgroundGradientFrom: '#fb8c00',
              backgroundGradientTo: '#ffa726',
              decimalPlaces: 2, // optional, defaults to 2dp
              color: (opacity = 1) => rgba(255, 255, 255, ${opacity}),
              style: {
                borderRadius: 16
              }
            }}
            bezier
            style={{
              marginVertical: 8,
              borderRadius: 16
            }}
          />
        </View>
      </View>
    );
  }
}