diff --git a/README.md b/README.md index d2b16030..dd0bef08 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ ## install -$ npm install native-echarts --save +$ npm install native-echarts react-native-webview --save ## Usage @@ -80,6 +80,7 @@ screenshots: ![image](https://github.com/somonus/react-native-echarts/blob/master/example/demoIOS.png) ### Android +copy tpl.html to android\app\src\main\assets Open the Android project in the android directory with Android Studio and click run. diff --git a/src/components/Echarts/index.js b/src/components/Echarts/index.js index fe86c8ce..fdcb9afd 100644 --- a/src/components/Echarts/index.js +++ b/src/components/Echarts/index.js @@ -1,31 +1,40 @@ import React, { Component } from 'react'; -import { WebView, View, StyleSheet, Platform } from 'react-native'; +import { View, StyleSheet, Platform } from 'react-native'; import renderChart from './renderChart'; +import WebView from 'react-native-webview'; import echarts from './echarts.min'; - +// 版本变更https://zhuanlan.zhihu.com/p/89494013 export default class App extends Component { constructor(props) { super(props); + this.state = {chart:null}; + // refs 弃用了 https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs + this.chart = null; + this.setChart = element => { + this.setState({chart:element}) + }; this.setNewOption = this.setNewOption.bind(this); } - - componentWillReceiveProps(nextProps) { - if(nextProps.option !== this.props.option) { - this.refs.chart.reload(); + static getDerivedStateFromProps(nextProps, prevState) { + if(nextProps.option !== prevState.option) { + prevState.chart && prevState.chart.reload(); } + + return null; } + setNewOption(option) { - this.refs.chart.postMessage(JSON.stringify(option)); + this.state.chart && this.state.chart.postMessage(JSON.stringify(option)); } render() { return ( this.props.onPress ? this.props.onPress(JSON.parse(event.nativeEvent.data)) : null} /> diff --git a/src/components/Echarts/tpl.html b/src/components/Echarts/tpl.html index ca20a315..5bd5e2f8 100644 --- a/src/components/Echarts/tpl.html +++ b/src/components/Echarts/tpl.html @@ -11,7 +11,7 @@ width: 100%; margin: 0; padding: 0; - // overflow: hidden; + /* overflow: hidden; */ } #main { diff --git a/src/index.js b/src/index.js index bc6a8695..74883f98 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import { WebView, View } from 'react-native'; import { Container, Echarts } from './components' export default class App extends Component {