React-native приложение теряет производительность при отображении диаграммы - PullRequest
0 голосов
/ 20 марта 2020

Я хочу использовать реактив-native-chart-kit для отображения графика, но когда я добавляю его в приложение, приложение теряет производительность. Это можно заметить, нажав TouchableOpacity, когда отображается график, он занимает примерно 0,5 секунды и без отображения символа действие мгновенно.

Я использую expo, но та же проблема возникает, если я использую голый реагирующий проект. Я также проверил различный пакет 'victory-native' для отображения графиков, но эффект тот же.

Я не знаю, в чем может быть проблема. Я проверил его на двух разных устройствах (оба android), так что я думаю, что это не так.

Вот простое приложение, в котором возникает проблемная доза (созданная 'expo init', а затем 'expo install react-native-chart-kit' и 'expo install activ-native-svg'):

Приложение. js:

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { LineChart } from "react-native-chart-kit";

export default class App extends React.Component {

    state = {
        visible: false,
        chartConfig: {
            backgroundGradientFrom: "#1E2923",
            backgroundGradientFromOpacity: 0,
            backgroundGradientTo: "#08130D",
            backgroundGradientToOpacity: 0.5,
            color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
            barPercentage: 0.5
        },
        data: {
            labels: ["January", "February", "March", "April", "May", "June"],
            datasets: [{data: [20, 45, 28, 80, 99, 43],}],
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={{height: 40, width: 100, backgroundColor: '#ddd'}}
                    onPress={() => this.setState({visible: !this.state.visible})}
                >
                    <Text>Click</Text>
                </TouchableOpacity>
                { this.state.visible && <Text>Surprise</Text>}
                <LineChart
                    data={this.state.data}
                    width={300}
                    height={220}
                    chartConfig={this.state.chartConfig}
                />
            </View>
        );
    }
}

пакет. json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~36.0.0",
    "latest": "^0.2.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-chart-kit": "^5.2.0",
    "react-native-svg": "^9.13.6",
    "react-native-web": "~0.11.7",
    "victory-native": "^34.1.0"
  },
  "devDependencies": {
    "babel-preset-expo": "~8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...