在React Native上无延迟地呈现多个图表

Question

我需要显示用户馈送的项目，其中每个项目都包含一个图表。现在我使用react-native-svg-charts：

<LineChart
 style={{ height: 150, position: 'relative', left: -20 }}
 data={data}
 curve={shape.curveNatural}
 svg={{ stroke: chartColor1, strokeWidth: 5 }}
 contentInset={{ top: 20, bottom: 20 }}
 showGrid={false}
 numberOfTicks={0}
 key={props.id}
 >

但当我加载超过50个项目时，应用程序的性能会下降到10-15 fps。

我认为这是因为页面上有很多SVG。你认为我应该使用哪种解决方案来避免这种情况？

Answer 1

我最近在这里回答了一个类似的问题：Real-time data update chart in React Native，并将在这里提出同样的建议。

在React Native中使用我尝试过的所有基于SVG的库进行绘图时，我一直在为性能而苦苦挣扎。我最近决定尝试在WebView中使用几个基于画布的绘图库，并获得了非常好的结果。我最终做了一个简单的包：https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts。

如果你不想使用这个包，而是自己去做，那就很简单了。虽然软件包源代码可能是最好的资源，但我将总结以下步骤：

1. 创建一个超文本标记语言文件并将其导入到您的组件中: const htmlTemplate = require("./index.html")；

其中包含所选图表库的JavaScript。上面的链接包目前支持Chart.js v3和uPlot。在下面的步骤中，我将显示一个配置引用，例如，您可以向configuration.

• Create注入一些配置和创建图表的JavaScript (webref = r)} source={htmlTemplate} onLoadEnd={() => {addChart(originWhitelist=) }} />

其中配置类似于: const addChart = addChart => { webref.injectJavaScript(const el = document.createElement("canvas"); document.body.appendChild(el); window.canvasLine = new Chart(el.getContext('2d'), ${JSON.stringify(config)});)；}；

而config是一个有效的Chart.js configuration.

• To，更新图表数据时只需注入一些JavaScript即可更新数据。对于这里的Chart.js，应该是这样的: const setData = dataSets => { if (dataSets) { dataSets.forEach((_，i) => { webref.injectJavaScript(window.canvasLine.config.data.datasets[${i}].data = ${JSON.stringify(dataSets[i])}; window.canvasLine.update();)；})；} }；

其中dataSets是有效的Chart.js数据集。

• 就是这样！我只是通过https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts包试用了这两个绘图库，但到目前为止，性能非常好，即使所有传递的图表数据都使用了JSON字符串。我还没有完全量化它，但这两个库的性能都比我尝试过的任何基于SVG的库都要高出几个数量级。