native-echarts 在安卓上无法显示出来

Posted 2021-11-25 lude1994

1.native-echarts 的配置是百度echarts

2.模拟器上试了很多次都显示不出来（具体不清楚，我的是这样）

3.真机测试可以显示图表，以下是配置：

　　a。将node_modules\native-echarts\src\components\Echarts下的tpl.html复制到android\app\src\main\assets目录下，assets需要自己新建文件夹

　　b。在node_modules\native-echarts\src\components\Echarts下的index.js文件进行修改：

　　　　

import React, { Component } from ‘react‘;
import { WebView, View, StyleSheet, Platform } from ‘react-native‘; // 需要添加一个Platform
import renderChart from ‘./renderChart‘;
import echarts from ‘./echarts.min‘;


export default class App extends Component {

  constructor(props) {
    super(props);
    this.setNewOption = this.setNewOption.bind(this);
  }


  componentWillReceiveProps(nextProps) {
    if(nextProps.option !== this.props.option) {
      this.refs.chart.reload();
    }
  }

  setNewOption(option) {
    this.refs.chart.postMessage(JSON.stringify(option));
  }

  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={Platform.OS === ‘ios‘ ? require(‘./tpl.html‘) : {uri:‘file:///android_asset/tpl.html‘}} // 这处需要修改
          onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
        />
      </View>
    );
  }
}