简介
React Native 是一种快速创建跨平台 Native 应用程序的方式。但是在一些场景下，我们需要使用图表来展示数据，这时候 react-native-charts-wrapper-nevo 就是一个很好的选择。
react-native-charts-wrapper-nevo 是一个免费、易于使用的 React Native 图表库，它提供了多种图表类型，例如折线图、柱形图、饼图、散点图等。这个库基于 MPAndroidChart 库开发而来，充分发挥了它的优势。
在这篇文章中，我们将介绍如何使用这个库来制作一个简单的折线图，并向你介绍一些基本的概念和 API。
安装
要使用 react-native-charts-wrapper-nevo，我们需要先使用 npm 进行安装。在你的项目根目录下使用以下命令：
npm install react-native-charts-wrapper-nevo --save
创建折线图
在开始创建折线图之前，需要确保你的项目配置已完成，并且已经安装了 react-native-svg 包和其对应的原生代码（详见 react-native-svg）。如果你没有安装，可以按照官方文档进行安装。
在做完上述准备工作后，我们可以开始创建一个折线图组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------- - ---- -----------------------------------
------ ------- ----- ----------- ------- --------- -
-------- -
------ -
----------
-------
--------- -
-
----- -
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
- -- -- -- - --
--
--
--
--
--------
------------------- -----
------------ --
--
--------
----- -
------------ --
--
------ -
-------- ------
--
--
--
--
-
-在该代码中，我们使用了 LineChart 组件，并传递了相应的数据。
我们可以看到，数据传递给 LineChart 组件时需要遵循一定的数据格式，具体可以查看官方文档。在这个例子中，我们只是简单地传递了一个 datasets 对象，其中包含了一个 data 数组，每个元素都是一个包含 x 和 y 坐标的对象。
在 xAxis 和 yAxis 属性中，我们可以更改坐标轴的相关参数。在本例中，我们启用了 granularity 属性，而将 axisMinimum 属性设置为 0，以确保我们的折线图不会在轴上出现。
图表样式
当已经创建好折线图后，我们也可能对它进行样式修改。
-- -------------------- ---- -------
----------
----------
------------------- ----- --- ---- ------ --
---------
-------- -----
---------- ----------
--------- ---
-------------------- ---------
------------------ ---------
----- ---------
--
------------------------------
-------------------------------
------------------
--------------------
---------------------
-----------------
-----------------------------
--------------------------
-----------------------
---------------
--在这个例子中，我们可以看到一些新的属性。我们可以在 chartDescription 属性中设置一个描述性文本。我们可以在 legend 属性中更改图例的位置、大小和形状。在这个例子中，我们启用了双击缩放、拖动、移动和绘制轴的粗体轿背景。
结论
React Native Chart Wrapper 是用于创建图表的好选择，它提供了多种类型的图表，所有这些都可以在不编写任何本地代码的情况下使用。通过此文章，您现在应该知道如何设置和创建您的第一个折线图。祝你好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0b7a