在React Native中使用封装的Echarts

需要文件:

  1. chart.html  (将echarts源码复制到chart.html文件中)

  2. MyEcharts.js

部分源码:

render() {
/**在安卓下加载的资源跟ios不同,需要做兼容处理,
* 就是将当下的chart.html拷贝到android/app/src/main/assets
*/
const source = (Platform.OS == 'ios') ? require('./chart.html') : {uri: 'file:///android_asset/chart.html'}
return (
<View style={{width: this.props.width || width, flex: 1, height: this.props.height || 400,}}>
<WebView
ref="chart"
originWhitelist={['*']}
scrollEnabled={false}
style={{
height: this.props.height || 400,
backgroundColor: this.props.backgroundColor || 'transparent'
}}
source={source} //加载的html资源
scalesPageToFit={Platform.OS !== 'ios'}
injectedJavaScript={renderChart(this.props)} //在html内执行js代码,必须是字符串
onMessage={event => this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null}
/>
</View>
);
}

解决echarts在Android中不显示问题:

  1. 新建根目录下的android\app\src\main\assets文件夹
  2. 复制chart.html文件到assets文件夹中
  3. 重新运行run

注意:在IOS打包时也需要将chart.html文件放在根目录下的ios\bundle\assets\js\chart\chart.html

解决重复刷新问题:

// 预防过渡渲染
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.reload();
// }
// }

// 解决首次加载图形无法显示问题
componentDidMount() {
this.refs.chart.injectJavaScript(this._renderChart(this.props))
}

componentWillReceiveProps(nextProps) {
if (nextProps.option !== this.props.option) {
// 解决数据改变时页面闪烁的问题
this.refs.chart.injectJavaScript(this._renderChart(nextProps))
}
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注