react-native-echarts安卓版打包问题

发表于 更新于 分类于 阅读次数： Waline： 本文字数： 222 阅读时长 ≈ 1 分钟

react-native-echarts 安卓版打包后,图表不显示

1、兼容手机端

1
<meta name="viewport" content="width=device-width, initial-scale=1">

2、解决 android 打包后不显示

复制文件 tpl.html（路径： node_modules\native-echarts\src\components\Echarts）
至 android\app\src\main\assets 目录下

1
2
3
4
5
6
7
8
9
10
11
<!--将-->
source={require('./tpl.html')}

<!--修改为-->
source={Platform.OS==='ios' ? require('./tpl.html'):{uri:'file:///android_asset/tpl.html'}}

<!--另外将-->
import { WebView, View, StyleSheet } from 'react-native';

<!--修改为-->
import { WebView, View, StyleSheet, Platform } from 'react-native';

具体代码又该如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--node_modules\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 {
  componentWillReceiveProps(nextProps) {
    if (nextProps.option !== this.props.option) {
      this.refs.chart.reload();
    }
  }

  render() {
    return (
      <View style={{ flex: 1, height: this.props.height || 400, }}>
        <WebView
          ref="chart"
          scrollEnabled={Platform.OS === 'ios' ? false : true}   //滑动设置ios、android  设置相反
          injectedJavaScript={renderChart(this.props)}
          style={{
            height: this.props.height || 400,
            backgroundColor: this.props.backgroundColor || 'transparent'
          }}
          scalesPageToFit={Platform.OS === 'ios' ? false : true}  //缩放设置ios有效、android不起作用
          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>
    );
  }
}