Я хочу использовать реактив-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
}