在 React Native 中渲染图形

Question

我正在使用react-native 和expo。我想以这种形式可视化由 x 和 y 点组成的数据 [ [x1,y1] , [x2,y2] , [x3,y3] ]。但是，我无法在 React Native 中找到合适的库来将此数据可视化为折线图或贝塞尔图。

我已经尝试过react-native-chart-kit，但是它将x值作为x轴上的标签，并且不绘制相对于x点的y点。我还尝试了react-native-svg和victory-native，但似乎没有任何东西可以正常工作或按预期工作。

任何人都可以指导我如何做到这一点吗？ 所需要做的就是在图表上绘制一个或多个折线图，并且 y 点应相对于 x 点绘制。

提前致谢。

Answer 1

在 React Native 项目中使用 react-native-gifted-charts

我最近将react-native-gifted-charts集成到我的React Native项目中，发现它既可靠又高度可定制。如果您正在为您的 React Native 应用程序寻找一个强大的图表库，我强烈建议您尝试一下。

您可以在他们的官方网站上找到更多信息和文档：

https://gifted-charts.web.app/

易于使用：该库可以直接设置并集成到您现有的项目中。 定制：它提供了广泛的定制选项，允许您根据您的特定需求定制图表。

性能：图表针对性能进行了优化，确保流畅的交互和动画。 这是一个帮助您入门的基本示例：

import { LineChart } from "react-native-gifted-charts";
    
const App = () => {
const data = [{value: 15}, {value: 30}, {value: 26}, {value: 40}];
return (
    <LineChart
    data={lineData}
    color={'#177AD5'}
    thickness={3}
    dataPointsColor={'red'}
  />
);
};