entronad / react-native-echarts-demo Goto Github PK

export default class WebChart extends React.Component {
  static defaultProps = {
    option: {},
    exScript: `
      chart.on('click', (params) => {
        console.log('click')
        ^^^^^^^^^^^^^^^^^^^ ------ this doesn't invoke !!
        window.postMessage(JSON.stringify({
          type: 'select',
          payload: params,
        }))
      })
    `,
    onMessage: () => {},
  }
  componentDidUpdate(prevProps, prevState) {
    const optionJson = JSON.stringify(this.props.option)
    this.update(optionJson)
  }
  update = (optionJson) => {
    this.webView.postMessage(optionJson)
  }
  render() {
    return (
      <View style={this.props.style}>
        <WebView
          ref={(elem) => { this.webView = elem }}
          style={{ backgroundColor: 'rgba(0, 0, 0, 0)' }}
          scrollEnabled={false}
          scalesPageToFit={os !== 'ios'}
          source={os === 'ios' ? html : { uri: 'file:///android_asset/web/WebChart/index.html' }}
          injectedJavaScript={`
            const chart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' })
            chart.setOption(${JSON.stringify(this.props.option)})
            document.addEventListener('message', (e) => {
              chart.setOption(JSON.parse(e.data), true)
            })
            ${this.props.exScript}
          `}
          onMessage={(e) => { this.props.onMessage(JSON.parse(e.nativeEvent.data)) }}
        />
      </View>
    )
  }
}