首页 > 建站教程 > APP开发,混合APP >  react-native native-echarts使用方法指南正文

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