探索React Native图表库：react-native-chart

import React from 'react';
import { View } from 'react-native';
import { LineChart } from 'react-native-chart';
 
const data = {
  labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  datasets: [
    {
      data: [20, 45, 28, 80, 20, 30],
      color: (opacity = 1) => `rgba(255, 100, 100, ${opacity})`, // 自定义颜色
      strokeWidth: 3, // 定义线宽
    },
  ],
};
 
const chartConfig = {
  backgroundColor: '#ffffff', // 背景颜色
  backgroundGradientFrom: '#ffffff', // 渐变开始颜色
  backgroundGradientTo: '#ffffff', // 渐变结束颜色
  decimalPlaces: 2, // 数据保留小数点后位数
  // 其他配置...
};
 
const LineChartExample = () => {
  return (
    <View style={{ height: 200 }}>
      <LineChart data={data} width={300} height={200} chartConfig={chartConfig} />
    </View>
  );
};
 
export default LineChartExample;

这段代码展示了如何使用react-native-chart库中的LineChart组件来创建一个简单的折线图。首先，我们定义了数据集和相应的标签，然后通过chartConfig对图表进行了一些基本配置。最后，我们在一个View组件中渲染了LineChart，并指定了它的宽度和高度。这个例子提供了如何开始在React Native应用中使用图表库的基础。