Refre sh График при нажатии кнопки - PullRequest
Новая
       10

Refre sh График при нажатии кнопки

0 голосов
/ 06 апреля 2020

Я пытаюсь создать в моем приложении кнопку, которая будет переоценивать sh случайные данные на графике (выполненном с использованиемact-native-chart-kit) с использованием компонента React Native Button. Мой код ниже: 

import * as React from 'react';
import {useState} from 'react';
import { StyleSheet, Text, View, Switch, Dimensions, Button, Alert } from 'react-native';
import { LineChart } from "react-native-chart-kit";
import Header from "./components/Header";
import Colors from "./constants/colors";


export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  function refresh_data(){
    ...
    //Code here?
    ...
  }

  return (
    <View style = {styles.screen}>
      <View style = {styles.button}>
        <Button
          title="Refresh"
          color={Colors.primary}
          onPress={() => refresh_data}
        />
      </View>

      <View style = {styles.graph}>
        <View style = {{flex: 1}}>
          <Text style = {styles.text}>Bezier Line Chart</Text>
        </View>

        <View style={{flex: 2}}>
        <LineChart
          data={{
            labels: ["January", "February", "March", "April", "May", "June"],
            datasets: [{
              data: [
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100,
                Math.random() * 100                
              ]
              }]
          }}
          width={Math.floor(Dimensions.get("window").width * 0.6)} // from react-native
          height={220}
          yAxisLabel="$"
          yAxisSuffix="k"
          yAxisInterval={1} // optional, defaults to 1
          chartConfig={{
            backgroundColor: "#e26a00",
            backgroundGradientFrom: "#fb8c00",
            backgroundGradientTo: "#ffa726",
            decimalPlaces: 2, // optional, defaults to 2dp
            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            style: {
              borderRadius: 16
            },
            propsForDots: {
              r: "6",
              strokeWidth: "2",
              stroke: "#ffa726"
            }
          }}
          bezier
          style={{
            marginVertical: 8,
            borderRadius: 16
          }}
        />
      </View>

    </View>

  </View>
  );
}

const styles = StyleSheet.create({
  screen: {
  flex: 1,
  alignItems: 'stretch',
  justifyContent: 'center'
  },
  button: {
  alignSelf: 'center',
  justifyContent: 'center',
  flex: 1
  },
  graph: {
  flex: 3,
  alignItems: 'center',
  justifyContent: 'center'
  }
});

Я довольно плохо знаком с Javascript и реагирую, так что это, вероятно, довольно простой вопрос c, и я хотел бы узнать больше всего. Одна мысль, которую я пытался сделать, состояла в том, чтобы перезагрузить всю страницу с помощью location.reload (), но это не то, что я ищу (я знаю, потому что у него есть переключатель в другой части приложения, который обновляет данные при каждом нажатии, я просто не могу понять, как). Заранее спасибо за любую помощь!

1 Ответ

1 голос
/ 06 апреля 2020

Добавьте некоторые исходные «случайные» данные в состояние компонента и в состоянии установки обработчика щелчка refresh_data добавьте новые «случайные» данные.

Кроме того, правильный синтаксис для установки onClick обратный вызов равен onClick={refresh_data} или onClick={() => refresh_data()}. 

export default function App() {
  const [randomData, setRandomData] = useState([
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100,
    Math.random() * 100                
  ]);

  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  function refresh_data(){
    setRandomData([
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 100                
    ])
  }

  return (
    <View style = {styles.screen}>
      <View style = {styles.button}>
        <Button
          title="Refresh"
          color={Colors.primary}
          onPress={refresh_data}
        />
      </View>

      <View style = {styles.graph}>
        <View style = {{flex: 1}}>
          <Text style = {styles.text}>Bezier Line Chart</Text>
        </View>

        <View style={{flex: 2}}>
        <LineChart
          data={{
            labels: ["January", "February", "March", "April", "May", "June"],
            datasets: [{ data: randomData }]
          }}
          width={Math.floor(Dimensions.get("window").width * 0.6)} // from react-native
          height={220}
          yAxisLabel="$"
          yAxisSuffix="k"
          yAxisInterval={1} // optional, defaults to 1
          chartConfig={{
            backgroundColor: "#e26a00",
            backgroundGradientFrom: "#fb8c00",
            backgroundGradientTo: "#ffa726",
            decimalPlaces: 2, // optional, defaults to 2dp
            color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
            style: {
              borderRadius: 16
            },
            propsForDots: {
              r: "6",
              strokeWidth: "2",
              stroke: "#ffa726"
            }
          }}
          bezier
          style={{
            marginVertical: 8,
            borderRadius: 16
          }}
        />
      </View>

    </View>

  </View>
  );
}

Однако много повторений, поэтому я бы также создал случайные данные утилита: 

const createRandomData = (length = 10) => Array(length)
  .fill()
  .map(() => Math.random() * 100);


const createRandomData = (length = 10) => Array(length).fill().map(() => Math.random() * 100);

console.log(createRandomData(3));
console.log(createRandomData(6));
console.log(createRandomData(12));

Новое использование: 

const [randomData, setRandomData] = useState(createRandomData(12));
...
setRandomData(createRandomData(12));
...