在 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 并会在这里提出相同的建议。

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

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

1. 创建一个 HTML 文件并将其导入到您的组件中：

   const htmlTemplate = require("./index.html");
   

   其中 HTML 包含所选图表库的 JavaScript。上面的链接包目前支持Chart.js v3 和uPlot。在下面的步骤中，我将展示一个 Chart.js 配置。
2. 创建一个引用，例如let webref。
3. 创建一个WebView 和onLoadEnd，您可以将一些JavaScript 注入到WebView 中，这将配置和创建您的图表

   <WebView
     originWhitelist={["*"]}
     ref={r  => (webref = r)}
     source={htmlTemplate}
     onLoadEnd={() => { addChart(config) }}
   />
   

   其中addChart 看起来像：

   const addChart = config => {
     webref.injectJavaScript(`const el = document.createElement("canvas");
       document.body.appendChild(el);
       window.canvasLine = new Chart(el.getContext('2d'), ${JSON.stringify(config)});`);
   };
   

   config 是一个有效的 Chart.js 配置。
4. 要更新图表数据，只需注入一些 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 数据集。
5. 就是这样！我只通过https://www.npmjs.com/package/@dpwiese/react-native-canvas-charts 包玩过这两个绘图库，但到目前为止性能非常好，即使对所有传递的图表数据进行了 JSON 字符串化。我还没有彻底量化它，但是这两个库的性能比我尝试过的任何基于 SVG 的库都高出几个数量级。