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

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} //滑动设置iosandroid 设置相反
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>
);
}
}