React Native图表插件react-native-charts-wrapper集成教程

最新推荐文章于 2024-11-25 18:33:59 发布

转载最新推荐文章于 2024-11-25 18:33:59 发布 · 1.4w 阅读

【React-Native2点滴知识】专栏收录该内容

698 篇文章

订阅专栏

本文详细介绍如何在React Native项目中集成并使用react-native-charts-wrapper图表插件，包括项目搭建、依赖安装、配置步骤及示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写了些RN的第三方插件的教程，（比如`react-native-baidu-map` iOS端集成：http://www.jianshu.com/p/eceb7e66fa5e ，`RN升级配置说明`：http://www.jianshu.com/p/0c30e94de69b ），我觉得写博客来帮网友解决问题，比单纯的截图和QQ聊天效率更高，并且复用性高，不用再重复解答。可能很多朋友都在集成第三方的时候会遇到一些莫名其妙的报错，稀奇古怪的填坑，所以此时我们需要有极强的耐心，和清晰的思路。好了，话不多说，接下来开始一步一步集成图表插件`react-native-charts-wrapper`:

图片.png

图表插件react-native-charts-wrapper github地址

1.新建一个新的项目，从零开始演示（ChartsTest）

当出现以下界面，就说明新建项目成功：

2.安装react-native-charts-wrapper（注意：一定要在项目根目录下进行安装）：

cd到项目根目录：

在终端输入：
npm install --save react-native-charts-wrapper

3.把该目录下`ChartsTest/node_modules/react-native-charts-wrapper/ReactNativeCharts`的整个`ReactNativeCharts`文件夹,拖入到项目中：

添加完后：

4.Add Bridge File：因为后面会用到`SwiftyJSON`and`iOS Charts`,这是用Swift写的，所以我们需要一个桥接文件，方法如下：

新建一个工程名-Bridging-Header.h头文件(注意，必须是工程名开头！！！)：

然后：Edit -> Convert -> To Current Swift Syntax...

等待一会便好。。。

图片.png

接下来在桥接文件里添加：

    #import "React/RCTBridge.h"
    #import "React/RCTViewManager.h"
    #import "React/RCTUIManager.h"
    #import "React/UIView+React.h"
    #import "React/RCTBridgeModule.h"
    #import "React/RCTEventDispatcher.h"
    #import "React/RCTEventEmitter.h"