react native中使用echarts

時間 2019-11-12

標籤 react native 使用 echarts 欄目 React 简体版

原文原文鏈接

開發平臺：mac prohtml

node版本：v8.11.2node

npm版本：6.4.1react

react-native版本：0.57.8android

native-echarts版本：^0.5.0

目標平臺：android端收銀機，android7.0+

最近在使用react native進行app的開發工做，rn開發的內容會與原生app混合，在一些使用場景下遇到了一些問題ios

使用場景：每日收益與每個月收益的折線圖統計git

在pc/h5端的開發工做中，圖標類的開發使用echarts/f2等三方工具都是比較常見的了，在react native中，沒有了DOM的概念，所以在react native中使用了一些三方的圖標庫github

native-echarts，github地址。web

須要更換echarts版本的方法npm

native-echarts內部使用了react native中的webview進行圖表的展現，本質上只是傳入數據，經過echarts渲染出靜態的HTML文檔，而後經過webview展現出來而已。react-native

netive-echarts內部使用的echarts版本爲v3.2.3"版本，若是須要更高級的echarts版本，只須要更換src/components/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>
      );
    }
  }