Added support onMessage for WebView

This commit is contained in:
simonguo 2017-11-04 22:45:22 +08:00
parent 9fc5b29aec
commit 76d3597483
1 changed files with 15 additions and 11 deletions

View File

@ -1,25 +1,29 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { WebView, View, StyleSheet } from 'react-native'; import { WebView, View } from 'react-native';
import _ from 'lodash';
import renderChart from './renderChart'; import renderChart from './renderChart';
import echarts from './echarts.min';
export default class App extends Component { export default class App extends Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if(nextProps.option !== this.props.option) { if (!_.isEqual(nextProps.option, this.props.option)) {
this.refs.chart.reload(); this.chart.reload();
} }
} }
render() { render() {
const { height = 400, onMessage } = this.props;
return ( return (
<View style={{flex: 1, height: this.props.height || 400,}}> <View style={{ flex: 1, height }}>
<WebView <WebView
ref="chart" ref={(ref) => {
this.chart = ref;
}}
onMessage={(event) => {
onMessage && onMessage(event.nativeEvent.data);
}}
javaScriptEnabled={true}
scrollEnabled={false} scrollEnabled={false}
injectedJavaScript={renderChart(this.props)} injectedJavaScript={renderChart(this.props)}
style={{ style={{ height }}
height: this.props.height || 400,
}}
source={require('./tpl.html')} source={require('./tpl.html')}
/> />
</View> </View>