react native中使用echarts

开发平台：mac pro

node版本：v8.11.2

npm版本：6.4.1

react-native版本：0.57.8

native-echarts版本：^0.5.0

目标平台：android端收银机，android7.0+

 

最近在使用react native进行app的开发工作，rn开发的内容会与原生app混合，在一些使用场景下遇到了一些问题

 

使用场景：每日收益与每月收益的折线图统计

 

在pc/h5端的开发工作中，图标类的开发使用echarts/f2等三方工具都是比较常见的了，在react native中，没有了dom的概念，因此在react native中使用了一些三方的图标库

native-echarts，地址。

 

需要更换echarts版本的方法

native-echarts内部使用了react native中的webview进行图表的展示，本质上只是传入数据，通过echarts渲染出静态的html文档，然后通过webview展示出来而已。

netive-echarts内部使用的echarts版本为v3.2.3"版本，如果需要更高级的echarts版本，只需要更换//echarts/echarts.min.js文件以及tpl.html文件里的内容即可。

 

使用时遇到的问题: 在debug模式下，真机以及测试机器上图标正常显示，打包成android的apk文件后图表都不显示

解决方式：

1：找到native-echarts/src/components/echarts/tpl.html文件，复制到android/app/src/main/assets这个目录下面，如果文件夹不存在就新建一个即可。

2：找到文件native-echarts/src/components/echarts/index.js，修改为一下内容

import react, { component } from 'react';
  import { webview, view, stylesheet, platform } from 'react-native';
  import renderchart from './renderchart';
  import echarts from './echarts.min';

  export default class app extends component {

    constructor(props) {
      super(props);
    }
    

    // 预防过渡渲染
    shouldcomponentupdate(nextprops, nextstate) {
      const thisprops = this.props || {}
      nextprops = nextprops || {}
      if (object.keys(thisprops).length !== object.keys(nextprops).length) {
        return true
      }
      for (const key in nextprops) {
        if (json.stringify(thisprops[key]) != json.stringify(nextprops[key])) {
          // console.log('props', key, thisprops[key], nextprops[key])
          return true
        }
      }
      return false
    }

    componentwillreceiveprops(nextprops) {
      if (nextprops.option !== this.props.option) {
        // 解决数据改变时页面闪烁的问题
        this.refs.chart.injectjavascript(renderchart(nextprops))
      }
    }

    render() {
      return (
        <view style={{flex: 1, height: this.props.height || 400,}}>
          <webview
            ref="chart"
            scrollenabled = {false}
            injectedjavascript = {renderchart(this.props)}
            style={{
              height: this.props.height || 400,
              backgroundcolor: this.props.backgroundcolor || 'transparent'
            }}
            scalespagetofit={platform.os !== 'ios'}
            originwhitelist={['*']}
            source={{uri: 'file:///android_asset/tpl.html'}}
            onmessage={event => this.props.onpress ? this.props.onpress(json.parse(event.nativeevent.data)) : null}
          />
        </view>
      );
    }
  }

 

可能存在的问题？？？？

 

同时，在后续的react native版本中，webview即将从react native内部移除出去，改为三方包安装使用。参考：

https://reactnative.cn/docs/webview/#mixedcontentmode

https://github.com/react-native-community/discussions-and-proposals/issues/6

因此，在后续新版本中使用native-echarts，可能会使用不了，因此建议fork一个稳定的版本到自己的github上，或者在后续自己采用react-native-webview + echarts的方式*的组合版本，使用起来更加*。

 

 

参考文档：

https://github.com/somonus/react-native-echarts/issues/47

https://github.com/somonus/react-native-echarts/issues/32

https://github.com/somonus/react-native-echarts/issues/122