React Native集成ECharts

最新推荐文章于 2024-08-23 09:40:39 发布

慕天远

最新推荐文章于 2024-08-23 09:40:39 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Cui_xing_tian/article/details/95490271

本文介绍了在React Native项目中集成ECharts遇到的WebView警告及图表不显示的问题，提供了解决方案。包括安装最新版WebView组件，修改ECharts内部对WebView的引用，将tpl.html文件拷贝到android的assets目录，并调整Echarts组件的index.js代码。

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

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Echarts from 'native-echarts';
export default class ChartAnaly extends Component{
  render() {
    const option = {
      title: {text: 'ECharts demo'},
      tooltip: {},
      legend: {data:['销量']},
      xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
      yAxis: {},
      series: [{name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]
    };
    return (
        <Echarts option={option} height={300} />
    );
  }
}

特别提示这个解决方案管用是管用但是呢有个非常捞的问题出现，我发现哈每过几天我做的第二步和第四步就会恢复成原来的样子，导致我每过几天就要更改一次，后来才知道在RN中node_modules中的代码也就是第三方组件是不能更改的，因为你每次要部署项目都会再次从官网上下载源码，这才是导致我更改失效的根源，解决这个问题就需要在github上面fork一下官网上的项目然后建立自己的本地仓库，在本地仓库中做更改，然后更改RN中的下载地址。让每次部署的时候从你本地仓库中下载源码。这样就可以完美解决问题了。

这是一个最简单的案例但是却报错了，报错如下

错误信息提示：

WebView has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from 'react-native-webview' instead of 'react-native'.

但是源码中我并没有用到WebView这个组件就很奇怪，经过多方询问才知道这是因为ECharts内部使用了旧版本的WebView所导致的的需要我们手动修改，方法如下：

首先我们要安装新版的WebView组件

yarn add react-native-webview
react-native link react-native-webview

第二步改掉native-echarts里面对WebView旧版本的引用：

在node_modules\native-echarts\src\index.js和
node_modules\native-echarts\src\components\Echarts\index.js
中将

import { WebView,View } from 'react-native';
这里的 WebView 去掉.添加下面的
import { WebView } from "react-native-webview";

这样警告就没有了.

但是界面还是什么都没有显示.

第三步：在node_modules\native-echarts\src\components\Echarts找到tpl.html

将tpl.html拷贝这个文件到android的assets这个目录下,没有这个目录就新建一个

最后一步是更改node_modules\native-echarts\src\components\Echarts下index.js文件代码

源码如下：

const iosPlatform = Platform.OS === 'ios' ?'true' : 'false';

 source={iosPlatform ==='true' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}}