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>
);
}
}
