如何在 React Native 中实现交互式条形图？

Question

我正在开发 React Native App 项目，我必须在其中显示交互式条形图。 如被吸引的屏幕截图所示。该应用程序可在 iOS 和 Android 设备上运行。我们目前提供的最低 iOS 和 Android 应用支持如下：

1. Android 4.3.x / Jelly Bean / API level 18 
2. iOS 9.0 or later
3. iPadOS 9.0 or later.

要求：

1. 在条形图中，每个条形都是可点击的。当用户点击任意条时，相应的信息会显示在图表下方。
2. 建议的图表库应与我们在两种操作系统（iOS 和 Android）中的最低应用支持相匹配。

当前依赖项

目前，该项目使用以下 React 框架版本运行：

1. 反应原生：0.63.4
2. 反应：16.13.1

Answer 1

经过大量研究，我发现了以下图表库：

1. react-native-chart-kit

• 它提供了条形图，但它的文档没有显示带有条形图的点击/按下事件。所以在它的线程上问了这个问题。还发现它正在使用
• 每周下载量：11,959
• https://www.npmjs.com/package/react-native-chart-kit
• https://github.com/indiespirit/react-native-chart-kit
• 我还询问了有关最小操作系统支持和栏点击事件的问题，但没有得到该团队的任何回复。请参阅 URL https://github.com/indiespirit/react-native-chart-kit-example/issues/15、https://github.com/indiespirit/react-native-chart-kit/issues/485

2。 React Native Charts Wrapper react-native-charts-wrapper

• 每周下载量：2,804
• 基于MPAndroidChart(v3.1.0) & Charts(v3.3.0)，支持安卓和iOS。这些库是非常流行的原生图表库。这个库也有很好的支持和文档。
• 人们建议使用它。 react native chart/graph library that supports user onPress?

3. React Native 纯图表 react-native-pure-chart

• 每周下载量：536
• oksktank/react-native-pure-chart

4. react-chartjs-2

• reactchartjs/react-chartjs-2
• YouTube 视频:Using Chart.js With React

5.胜利

• FormidableLabs/victory
• VictoryBar

Quora 上的文章：查看用户文章显示良好反应原生图表工具的链接 https://www.quora.com/Which-is-the-best-react-native-charting-tool

最终结论

我发现React Native Charts Wrapper 适合我，即使我在Android 5.1 和iOS 9 中进行了测试，在这两个设备条形图中都可以正常工作并且没有出现任何崩溃或错误。该库也适用于最新设备。还用React-Native 0.64 进行了测试，我的结果很好。