react-native native-echarts使用方法指南

我爱模板网在使用react-native开发项目，需要显示chart图表，用了native-echarts，遇到了很大的坑，弄了半天才弄好，这里详细记录下：

1、安装

npm install native-echarts --S

2、引入

import Echarts from 'native-echarts’

3、使用

const [chartOption, setChartOption] = useState({});

showChart = () => {
    setChartOption({
      title: {
        text: 'K线图'
      },
      tooltip: {},
      legend: {
          data:['销量']
      },
      xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
    })
    setTimeout(()=>{
      showModel(true)
    },500)
}

//点击按钮
<Button onPress={() => {showChart()}}>显示chart</Button>
<Echarts option={chartOption} height={300} />

此时：做完上面，不行，直接报错：
WebView has been removed from React Native.

这是因为native-echart里面的WebView还是从React Native引用的，而，新版已经将WebView从React Native剥离出来了，需要单独引入

4、安装react-native-webview，修改chart引用
    ①、安装react-native-webview

npm install react-native-webview -S

    ②、进入node_modules\native-echarts\src\components\Echarts，找到index.js
      将

import { WebView, View, StyleSheet, Platform } from 'react-native';

      改为

import { View, StyleSheet, Platform } from 'react-native';
import { WebView } from 'react-native-webview';

    完成这一步，只是解决了报错问题，但是再看刚才的图表，发现不显示或者显示一段html代码，并没有渲染。

5、解决渲染问题
    ①、复制文件tpl.html（路径： node_modules\native-echarts\src\components\Echarts）至android\app\src\main\assets目录下，没有assets文件夹，则自己创建

    ②、编辑index.js文件
    路径：node_modules\native-echarts\src\components\Echarts
    将

source={require('./tpl.html')}

    修改为

source={Platform.OS==='ios' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}}

    同时, 修改

import { View, StyleSheet } from 'react-native';

    为

import { View, StyleSheet, Platform } from 'react-native';

    在执行完react-native bundle命令后，需要手动将资源文件res/drawable-mdpi中生成的tpl.html文件删除，再执行

cd android && ./gradlew assembleRelease

    命令，这样就能成功打包了。

6、React Native Echarts放大缩小问题解决方案：
    将node_modules\native-echarts\src\components\Echarts\index.js文件中

scalesPageToFit={false}

    修改为

scalesPageToFit={Platform.OS !== 'ios'}

7、重新运行 yarn android




部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！